css 头部banner背景图适配

最新推荐文章于 2025-03-06 21:56:09 发布

玉帛逸

最新推荐文章于 2025-03-06 21:56:09 发布

阅读量3.1k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/liming911911/article/details/77338204

版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了网页头部banner背景图的适配策略，包括使用媒体查询、img标签自适应及一种个人常用的方法。代码实现简单，但在IE下可能存在小问题，整体而言是较好的选择。附带了一个完整的Demo链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每个网站都有banner图，基本上设计图banner图宽度都为1920px，当然,适配的方式有多种。下面简单介绍几种：
1，最愚蠢的办法就是用媒体查询（不多说）；
2，用 img 标签去自适应，但是缺点也很明显，如何图片上很多字体等需要手写，当小到一定的程度位置就会不对，当很大时，图片分辨率也会有问题
3，下面介绍一种个人常用的，先贴代码

.course-class-infos {
position: relative;
    background: #666;
}           
.info-bg ,.cover-img-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}       
.cover-img-wrap {
    z-index: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

<div class="course-class-infos ">
        <div style="min-height: 830px;">
            <!--此处可写自己内容-->
        </div>
        <div class="info-bg">
                    <div class="cover-img-wrap" style="background-image:url(https://images-web.newnewbank.com/img_banner20150810.jpg)"></div>
        </div>
</div>

代码简单，就不多说，在ie下还是有点小问题，取舍下，这个还是最好的选择，另外，写自己内容的地方要注意层级问题
完整小demo-链接:http://images-lm.oss-cn-hangzhou.aliyuncs.com/%E8%83%8C%E6%99%AF%E5%9B%BE%E9%80%82%E9%85%8D.html