IE8兼容background-size属性
程序员文章站
2023-12-13 16:25:52
ie8兼容background-size属性
1.简介
background-size是css3新增的属性,但是ie8以下还是不支持,可以通过滤镜来实现这样的一个效果
background-size...
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的宽高,也可达到背景图相同效果。