background-size IE8兼容方案

2018-06-24 01:05:59来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

2017.7.5更新:

在处理IE8兼容性问题上,对于背景图片比背景框还大的情况,还需要做一下处理:

1 /*针对IE8的hack,目的是除掉之前background*/
2                 background:none\9; 

 

 

根据canius(http://caniuse.com/#search=background-size),background-size兼容性为IE9以及以上浏览器,如下图所示。

实例代码:

 1 <!doctype html>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8" />
 6         <title>background-size 兼容性处理</title>
 7         <style type="text/css">
 8             * {
 9                 margin: 0;
10                 padding: 0;
11             }
12             
13             .parent {
14                 width: 400px;
15                 height: 400px;
16                 margin: 100px;
17                 border: 1px solid red;
18                 background: url(img/aaa.jpg) no-repeat center center;
19                 background-size: 100% 100%;
20             }
21         </style>
22     </head>
23 
24     <body>
25         <div class="parent">
26         </div>
27     </body>
28 
29 </html>

 效果:

(1)chrome浏览器:

(2)IE8浏览器:

 

兼容性方案:

使用filter属性:

.parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                border: 1px solid red;
                background: url(img/aaa.jpg) no-repeat center center;
                background-size: 100% 100%;
                /*针对IE8的hack,目的是除掉之前background*/
                background: none\9;
                /*下一行为关键设置*/
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/aaa.jpg', sizingMethod='scale');
            }

 

IE8浏览器效果:

原理:

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true:默认值。滤镜激活。 false:滤镜被禁止。

sizingMethod:可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop:剪切图片以适应对象尺寸。 image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale:缩放图片以适应对象的尺寸边界

src:必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS效果:CSS改变下拉列表select框的默认样式

下一篇:繁星CSS3之旅-CSS选择器