ie8下兼容background-sizing方案
程序员文章站
2022-06-01 08:33:59
...
没啥可说的,直接上代码。
通常给页面设置全屏背景时会这样写:
html, body {
width: 100%;
height: 100%;
}
body {
overflow: hidden;
background: url("./images/bg.png");
-webkit-background-size: cover;
background-size: cover;
}
but,background-sizing不兼容ie8。如下图
效果图
解决方案
将body的样式增加一行代码:
body {
overflow: hidden;
background: url("./images/bg.png");
-webkit-background-size: cover;
background-size: cover;
/* ie8 实现全屏背景 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/bg.png", sizingMethod="scale");
}
效果图
参数解释
属性 | 解释 |
---|---|
src | 图片路径,可以是相对,也可以是绝对 |
sizingMethod | 可选值,设置或检索的方式来显示一个图像在对象边界显示方式。有三个值:crop裁剪图像以适应对象的尺寸;image,默认值,扩大或减少对象的边界,以适应图像的尺寸;scale,伸展或收缩图像填充对象的边界; |
推荐阅读
-
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
-
完美解决IE8下不兼容rgba()的问题
-
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
-
完美解决IE8下不兼容rgba()的问题
-
ie8下兼容background-sizing方案教程
-
vue兼容IE8以上解决方案
-
input输入框的border-radius属性在IE8下的完美兼容_html/css_WEB-ITnose
-
ie7、ie8 下Table 中 td 列固定宽度 未按样式设定显示 曲线解决方案_html/css_WEB-ITnose
-
ie8下兼容background-sizing方案
-
input输入框的border-radius属性在IE8下的完美兼容_html/css_WEB-ITnose