首页 > 代码库 > 解决IE浏览器部分版本不支持background-size属性问题

解决IE浏览器部分版本不支持background-size属性问题

2024-08-05 15:16:27   221人阅读

background-size是CSS3新增的属性，现在有很多浏览器都支持CSS3了。但是IE浏览器有些版本还是不支持，比如IE8，IE9也有些CSS3的属性会支持，但是有些也不支持。在这里就了解一下CSS3的background-size。

background-size 属性

1、定义：
background-size 用来调整背景图像的尺寸大小。以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。


2、语法：
background-size : contain | cover | 100px 100px | 50% 100%;

3、参数：
    background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
    background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
    background-size ：100px 100px; // 调整图片到指定大小；
    background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。

4、浏览器兼容：
    IE 和遨游不支持；
    Firefox 添加私有属性 -moz-background-size 支持；
    Safari 和 Chrome 添加私有属性 -webkit-background-size 支持；
    Opera 不支持 background-size 属性，添加其私有属性 -o-background-size 也不支持。

5、示例：

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

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

       代码如下：
<strong>background-image: url('file:///F:/test/images/flashbg.jpg');
background-size: cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.mamicode.com/'file:///F:/test/images/flashbg.jpg',  sizingMethod='scale');

这样就可以让IE也实现background-size:100%100%的效果了，注意这两个路径要一样，并且是绝对路径。


解决IE浏览器部分版本不支持background-size属性问题


联系
我们