HTML背景图的显示

一般写网站的时候，背景会有一张大图片，但是这个图片兼容性的处理是个令人头疼的问题，浏览器过大或者过小，都会影响图片的显示。

下面是我自己写的，适用于手机和PC的背景图片的样式

.bg{
    background: url(../images/bg.png);
    background-position: center 0; 
    background-repeat: no-repeat;
    background-size: cover; 
    -webkit-background-size: cover;
    -o-background-size: cover;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.png',sizingMethod='scale');
}

一般使用background-size属性，对这张图片的大小进行控制。

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

 background-size还可以给值，如background-size:100% 100%;强制把图片拉伸，随着浏览器的放大而放大，但是他的缺点是会强制的把图片拉伸，使图片变形来达到要求。

而使用cover属性则是按比例放大图片，图片不会失真，但是只是显示图片的一角，看不真切。

这个时候可以采用background-position属性，对这张背景图进行定位处理，浏览器过大或者过小的时候图片始终在中间显示，不会出现图片只显示一角的情况。

不过这些属性在IE下不兼容，需要使用滤镜。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.png',sizingMethod='scale');

采用滤镜可以解决在IE下的问题。