background-size IE8兼容方案
2018-06-24 01:05:59来源:未知 阅读 ()
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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- ie8下透明度处理 2020-06-11
- 关于浏览器兼容问题 2020-05-27
- css3文字特效和浏览器兼容性 2020-03-18
- 移动端常见问题(H5兼容性+JS兼容性+css3兼容性) 2020-03-17
- CSS设置DIV垂直居中且兼容IE浏览器的方法 2020-03-13
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash