解决background-size IE8兼容方案实例
程序员文章站
2022-03-09 11:32:54
...
根据canius(http://caniuse.com/#search=background-size),background-size兼容性为IE9以及以上浏览器,如下图所示。
实例代码:
<!doctype html> <html> <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> </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%; /*下一行为关键设置*/ 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兼容方案实例的详细内容,更多请关注其它相关文章!
上一篇: php网站如何搭建
下一篇: PHP性能问题分析+优化
推荐阅读
-
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
-
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
-
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
-
sql2008启动代理未将对象应用到实例解决方案
-
ie6,ie7,ie8完美支持position:fixed的终极解决方案
-
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
-
Bootstrap 3浏览器兼容性问题及解决方案
-
小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容
-
PHP并发场景的三种解决方案代码实例
-
SQL注入漏洞过程实例及解决方案