css 背景图铺满整个屏幕无滚动条

最新推荐文章于 2024-06-13 10:43:51 发布

不川类库

最新推荐文章于 2024-06-13 10:43:51 发布

阅读量2.6k

点赞数

分类专栏： css 文章标签： css

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种实现网页背景图铺满全屏且无滚动条的方法。方法一使用fixed定位结合background-size:cover属性；方法二则利用100vh单位配合background-size精确到100%100%，确保图片按原始比例缩放。

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

kk总结了两种方式实现背景图铺满整个屏幕并且无滚动出现的方式，下面来一一介绍：

方法一：

先上个效果图

html页面：一个用来放背景图的容器.bg

<body>
    <div class="main">
        <div class="bg"></div>
    </div>
<script>

style样式：.bg的样式

<style>
    body{
        margin:0;
        padding:0;
    }
    div.bg{
        /*方法一*/
        position:fixed;
        top:0;
        left:0;
        /*以上三句是让整个span放在屏幕的最左上方*/
        width:100%;
        height:100%;
        /*以上两句实现全屏大小*/
        background:url('img/banner01.jpg') no-repeat center 0;/*引入背景图，不重复出现*/
        background-size:cover;/*图片随屏幕大小同步缩放,但是图片画面可能只显示一部分*/
    }

</style>

方法二：

效果图：

这个显示简直完美！

style样式如下：

<style>
    body{
        margin:0;
        padding:0;
    }
    div.bg{
        width: 100%;
        height:100vh;
        background:url("img/banner01.jpg") no-repeat    ;
        background-size:100% 100%; /*随着原始比例缩放*/

    }

</style>

注：vh:表示显示窗口的高度，设置了100vh后，div.bg的高度会随着窗口的大小改变儿变化；

今天先到这里啦，各位大神有什么别的更好的方法，欢迎一起讨论哦！