background-size IE8兼容方案
2017-03-20 16:54
197 查看
2017.7.5更新:
在处理IE8兼容性问题上,对于背景图片比背景框还大的情况,还需要做一下处理:
根据canius(http://caniuse.com/#search=background-size),background-size兼容性为IE9以及以上浏览器,如下图所示。
实例代码:
效果:
(1)chrome浏览器:
(2)IE8浏览器:
IE8浏览器效果:
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true:默认值。滤镜激活。 false:滤镜被禁止。
sizingMethod:可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop:剪切图片以适应对象尺寸。 image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale:缩放图片以适应对象的尺寸边界。
src:必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
在处理IE8兼容性问题上,对于背景图片比背景框还大的情况,还需要做一下处理:
/*针对IE8的hack,目的是除掉之前background*/ background:none\9;
根据canius(http://caniuse.com/#search=background-size),background-size兼容性为IE9以及以上浏览器,如下图所示。
实例代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>background-size 兼容性处理</title> <style type="text/css"> * { margin: 0; padding: 0; } .parent { width: 400px; height: 400px; margin: 100px; border: 1px solid red; background: url(img/aaa.jpg) no-repeat center center; background-size: 100% 100%; } </style> </head> <body> <div class="parent"> </div> </body> </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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
相关文章推荐
- background-size IE8兼容方案
- css背景图片填充样式background-size兼容ie8以下浏览器解决
- ie8兼容background-size
- background-size:cover兼容IE8的方法
- background-size 兼容ie8
- IE8兼容background-size
- 背景图片background-size兼容ie8以下浏览器解决
- background-size兼容IE8解决方案
- IE8兼容background-size:cover
- background-size 兼容ie8
- IE8兼容background-size属性
- ie8兼容background-size属性
- 关于在ie8下背景图不识别background-size的问题
- 自整理IE6,IE7,IE8,Firefox兼容方案。。。
- 让ie8以下支持background-size的方法
- 【技术】让IE兼容background-size
- 让IE兼容background-size的方法_background-size ie下使用
- 【兼容】ie8 滤镜 表单background:none 穿透
- ie8下兼容background-sizing方案
- 解决ie 低版本的 background-size 兼容问题