background-size的属性以及ie兼容方法

来源：互联网发布：淘宝买衣服肩宽怎么量编辑：程序博客网时间：2024/05/18 02:58

background-size语法：

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

值描述测试length

设置背景图像的高度和宽度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

测试percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

测试cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

测试contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。测试

ie6，ie7，ie8下对css background-size并不支持，那么如何在ie下兼容background-size呢？
在ie下把图片完整的居中显示在一定范围内

在css中添加如下代码：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(    src='http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg',    sizingMethod='scale');

下面给出完整的实例代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>让IE兼容background-size的方法</title> <style>.bgpic {    background-image: url('http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg');    background-size: cover;    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(    src='http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg',    sizingMethod='scale');}</style></head><body>

0 0