html/css --- img图片自适应浏览器大小-实现热区域点击

css背景图与html插入img的区别

  1. css中的图片以背景图形式存在,写在html中的图片以标签形式存在。而在网页加载过程中,以css背景存在的图片会等到html结构加载完成才开始加载,而html中的img标签是网页结构(内容)的一部分会在加载结构的过程中加载。

    附:在一个单纯由Html和Css组成的页面中,背景图片总是最后加载的,那么假若我们想要使用较小的背景图片作为占位符,用于在加载较大的图片或者Flash文件时给用户以提示,大部分时候恐怕是达不到效果的,因为背景图片有时甚至会在大图片或Flash文件加载完成之后才会被加载。

  2. 通常非内容的图片(即用来修饰页面的元素)就写在css里,如果是内容性的图片就写在html中。比如,你要做一个漂亮相框的相册,那么修饰边框的图片就写在css里,相框里的内容照片就写在html中。

  3. 图片作为背景,在图片没有加载或者加载失败时,不会有个图片的占位标记,不会出现红叉。

css背景图

<!-- 背景图片按比例缩放 -->
<style type="text/css">
        body{      
        background-image: url(${pageContext.request.contextPath}/resources/images/home.jpg);      
        background-size:cover;    
     } 
</style>

img背景图

<!-- 图片自适应浏览器大小,无白边,无滚动条 -->
<body>
    <div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;">
        <img src="${pageContext.request.contextPath}/resources/images/home_bg.jpg" usemap="#planetmap" height="100%" width="100%">
    </div>
    <map name="planetmap" id="CribMap">
        <area shape="rect" coords="1427,550,1600,840" alt="screen" href="frame/sjzc.jsp">
    </map>
</body>

${pageContext.request.contextPath} : JSP中获取项目根目录(绝对路径)

猜你喜欢

转载自blog.csdn.net/hakey/article/details/80432068