ie8兼容background-size属性

1.简介

background-size是css3新增的属性，但是ie8以下还是不支持，可以通过滤镜来实现这样的一个效果
background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小；

background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。

 

2.兼容：

ie 和遨游不支持；

firefox 添加私有属性 -moz-background-size 支持；

safari 和 chrome 添加私有属性 -webkit-background-size 支持；

opera 不支持 background-size 属性，添加其私有属性 -o-background-size 也不支持。

3.示例：

{
	background:#00ff00 url(img.jpg) no-repeat;    
	-moz-background-size:60% 80%;     
	-webkit-background-size:60% 80%;      
	-o-background-size:60% 80%;}  
	background-size:60% 80%;  
}

在ie不支持这个属性的时候可以通过滤镜来实现这样的一个效果。

{
	background-image: url('file:///f:/test/images/flashbg.jpg');  
	background-size:cover;
	filter:progid:dximagetransform.microsoft.alphaimageloader(src='file:///f:/test/images/flashbg.jpg',sizingmethod='scale');  
}

注意：路径须要一样，并且是绝对路径

4.自己尝试了一下，在浏览器中运行良好

（1）没有添加的效果，在高版本浏览器和标准浏览器中正常，但在低版本中（例如ie8以及ie8以下，因为无法识别background-size而现实异常）：

a.正常（高版本）

b.异常（低版本）

（2）加了之后

a.正常

b.正常代码

 

<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>

（3）说明：

如果在某些浏览器中无法识别，还可以使用img标签将图片引入，设置img的宽高，也可达到背景图相同效果。