一般写网站的时候,背景会有一张大图片,但是这个图片兼容性的处理是个令人头疼的问题,浏览器过大或者过小,都会影响图片的显示。
一般使用background-size属性,对这张图片的大小进行控制。
background-size还可以给值,如background-size:100% 100%;强制把图片拉伸,随着浏览器的放大而放大,但是他的缺点是会强制的把图片拉伸,使图片变形来达到要求。
下面是我自己写的,适用于手机和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下的问题。