解决background-sizeIE8兼容方案实例

来源：动视网责编：小采时间：2020-11-27 18:52:21

解决background-sizeIE8兼容方案实例

解决background-sizeIE8兼容方案实例:根据canius（http://caniuse.com/#search=background-size），background-size兼容性为IE9以及以上浏览器，如下图所示。实例代码：<!doctype html> <html> <head> <meta charset="U

推荐度：

点击下载本文 文档为doc格式

导读解决background-sizeIE8兼容方案实例:根据canius（http://caniuse.com/#search=background-size），background-size兼容性为IE9以及以上浏览器，如下图所示。实例代码：<!doctype html> <html> <head> <meta charset="U

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

解决background-size IE8兼容方案实例

实例代码：

<!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浏览器：

解决background-size IE8兼容方案实例

（2）IE8浏览器：

解决background-size 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浏览器效果：

解决background-size IE8兼容方案实例