CSS来实现背景图铺满屏幕的方法是什么？
发布时间：2022-04-11 16:52:37 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是CSS实现背景图铺满屏幕的方法。背景图铺满屏幕是比较常见的需求，但是有一些新手朋友可能对于如何实现这个效果不是很清楚，因此分享给大家做个参考，文中的示例代码介绍得很详细，实现代码如下，接下来就跟随小编一起了解看看吧。 bac
|
这篇文章给大家分享的是CSS实现背景图铺满屏幕的方法。背景图铺满屏幕是比较常见的需求，但是有一些新手朋友可能对于如何实现这个效果不是很清楚，因此分享给大家做个参考，文中的示例代码介绍得很详细，实现代码如下，接下来就跟随小编一起了解看看吧。 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实现背景图铺满屏幕的方法就介绍到这，上述示例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助。 （编辑：PHP编程网 - 黄冈站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330482号