这篇文章给大家分享的是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大小。

    总结

    关于CSS实现背景图铺满屏幕的方法就介绍到这，上述示例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多大家可以关注群英网络的其它相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS有哪些较冷门属性，基本用法是什么

  可能我们有时候潜意识里认为, 当前实际开发中css属性已经足够用了, 但是前段时间突然想到:"会不会我们只是思维被限制在了常用的css属性中...

• SCSS的功能有哪些，SCSS与CSS3相比怎么样

  这篇文章主要介绍了CSS3 真的会替代 SCSS 吗的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

• HTML5页面中如何设置禁止长按图片保存的功能

  这篇文章主要介绍了html5移动端禁止长按图片保存的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS画极坐标的实际示例是怎样的，代码是什么

  CSS极坐标的实例代码，下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。

• flex和position使用常见的兼容性问题怎么解决

  这篇文章主要介绍了详解flex和position兼容采坑笔记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧