您的位置：首页 > 其它

ie8下兼容background-sizing方案

2017-11-19 15:55 176 查看
没啥可说的，直接上代码。

通常给页面设置全屏背景时会这样写：

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，伸展或收缩图像填充对象的边界；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航