如何在 CSS 中设置背景图像以填充整个屏幕？

发布时间：2023-08-22 14:50:38 所属栏目：语言来源：

导读：这篇文章给大家分享的是CSS实现背景图铺满屏幕的方法。背景图铺满屏幕是比较常见的需求，但是有一些新手朋友可能对于如何实现这个效果不是很清楚，因此分享给大家做个参考，文中的示例代码介绍得很详细，实现代码如下

这篇文章给大家分享的是CSS实现背景图铺满屏幕的方法。背景图铺满屏幕是比较常见的需求，但是有一些新手朋友可能对于如何实现这个效果不是很清楚，因此分享给大家做个参考，文中的示例代码介绍得很详细，实现代码如下，接下来就跟随小编一起了解看看吧。

body {

     width：100%；

     height: 100%;

    /* 加载背景图 */

    background: url("../static/images/index/backImg.jpg") no-repeat;

    /* 背景图垂直、水平均居中 */

    background-position: center center;

    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */

    background-attachment: fixed;

    /* 让背景图基于容器大小伸缩 */

    background-size: cover;

    /* 设置背景颜色，背景图加载过程中会显示背景色 */

　　background-color: rgba(41, 50, 39, 1);

}

    发现body的高度为0，所以图片不能显示；解决办法是给html设置宽高各100%，这样body就有值了，背景图片完整的充满整个屏幕。

    扩展

    url(images/beijing.png)——图片路径的位置；

    no-repeat—— 图片不重复；

    center 0px——center是距离页面左边的定位，0px是距离页面上面的定位；

    background-position: center 0——就是图片的定位，同上；

    background-size: cover;——把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；

    min-height: 100vh;——视窗的高度，“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/ window.innerHeight大小。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!