页面背景图尺寸不随浏览器缩放而变化

应用前提：当我们为某一个元素设置了背景图以后，希望该背景图不会因为浏览器的放大而放大或者随着浏览器的缩小而缩小

方法一：把图片作为背景图片（background）

background-size：cover，这个CSS3的属性作用是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中，如果不使用这个属性，在IE11和FireFox中缩放浏览器，背景图片会随之缩小，同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器；background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动，当设置为fixed时页面的其余部分滚动时，背景图像不会移动。

<style>
body{ margin:0; padding:0;}
#con{ 

    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-image:url("maskimg/star.jpg"); 
    background-position: center 0;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
    -webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */
    -o-background-size: cover;/* 兼容Opera */
    zoom: 1;    
}
</style>

<div id="con"></div>

方法二：使用<img>标签

使用这种方法往往是因为该图片不是作为整个body的背景，页面中还有其他不以这张图片为背景的元素。它实现的效果是图片尺寸不会随浏览器缩放而变化，但是如果有竖直滚动条时，图片是不会固定的而是会随滚动条移动。只需要把图片的宽度width设置成100%就行了。

<style>
    body{ 
        margin:0; 
        padding:0;
    }
    #pic{ 
        width:100%;
    }
</style>

<div id="con">
    <img id="pic" src="maskimg/star.jpg">
</div>