css背景图充满整个屏幕

原创 高志飞 教程 css 309阅读 26 天前 举报

想让整个界面有一个背景图片,自然想到的是在body上加background,代码如下:  

发现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大小。

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为前端工程师,乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:784783012 欢迎大家进群交流讨论,学习交流,共同进步。
当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有效资源还是很有必要的。

学习前端,我们是认真的

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复