IE8 支持的背景图样式不拉伸，cover效果

最新推荐文章于 2021-06-16 20:29:11 发布

易大师33

最新推荐文章于 2021-06-16 20:29:11 发布

阅读量1.6k

点赞数

分类专栏： css兼容文章标签： ie 8 html css

本文链接：https://blog.csdn.net/yidashi33/article/details/60869900

版权

css兼容专栏收录该内容

4 篇文章 0 订阅

订阅专栏

问题：background-size:cover IE8 不支持
解决：使用img作为背景图，用z-index来控制层级

HTML：

<div class="box">
    <!--背景图-->
    <div class="bg">
        <img src="banner.img" alt="">
    </div>
    <!--内容-->
    <div class='container'></div>
</div>

LESS:

.box{
    width: 100%;
    height:300px;
    position: relative;
    .bg{
        width: 100%;
        height: 300px;
        z-index: -1;
        position: absolute;
        //当图片小于浏览器宽度
        img{
            width: 100%;
            height: auto;
        }
        //当图片大于浏览器宽度
        img{
            height: 100%;
            width: auto;
        }
    }
}