欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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.正常(高版本)

IE8兼容background-size属性

b.异常(低版本)

IE8兼容background-size属性

IE8兼容background-size属性

(2)加了之后

a.正常

IE8兼容background-size属性

IE8兼容background-size属性

b.正常代码


 

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

(3)说明:

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

上一篇:

下一篇: