背景图屏幕：CSS实现背景图铺满屏幕的方法是什么

【文章声明】本文部分内容源于互联网收集整理，仅作参考！如需咨询“CSS实现背景图铺满屏幕的方法是什么”等有关服务器、云主机租用、托管、配置、价格问题，请随时咨询YINGSOO客服，为您答疑解惑！

【申请试用】IPLC国际专线 | 美国物理服务器促销 | 新加坡物理服务器促销

【知识拓展】服务器托管哪个好？如何判断

这篇文章给大家分享的是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实现背景图铺满屏幕的方法就介绍到这，上述示例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多大家可以关注本公司的其它相关文章。

YINGSOO，国际数据中心综合服务提供商，专注高品质、企业级海外服务器租用/托管服务，拥有ISP牌照、实体公司、专业团队、9年经验，7x24x365全天候服务，3天免费试用，品质保障、值得信赖!全国统一服务热线：400-630-3752

热搜词条：【索引成本】【主机互联网】【文件恢复】【捆绑文件】【攻击服务器】【网站的是】【命令函数】【提取文件】【字典运算】【美国服务器】【节点执行】【公众网页】【容器连接】【代码复制】【远程管理服务器】【博客域名】【插槽性能】【安装图像】【用户腾讯】【算法回归】【服务器租用】【脚本用户】【测试断言】【容器互通】【插件行号】【修改命令】【变量存储过程】【函数字符串】【病毒用户】【数据库置疑】

版权声明：本站文章来源标注为YINGSOO的内容版权均为本站所有，欢迎引用、转载，请保持原文完整并注明来源及原文链接。禁止复制或仿造本网站，禁止在非www.yingsoo.com所属的服务器上建立镜像，否则将依法追究法律责任。本站部分内容来源于网友推荐、互联网收集整理而来，仅供学习参考，不代表本站立场，如有内容涉嫌侵权，请联系alex-e#qq.com处理。