css背景图片自动铺满,css设置全屏背景图片

　　一张清晰漂亮的背景图片可以为一个网页加分不少，设计师经常使用大图作为页面的背景。我们不希望图像因为分辨率不同而失真，也不希望屏幕大的时候出现一片白色背景。简而言之，就是实现可以适应屏幕尺寸而不失真的大背景图像，背景图像不会随着滚动条滚动。

　　所以今天就给大家分享三种用CSS实现背景图片全屏叠加适配的方法，希望对你有所帮助。

01

　　边距：0px背景：url(images/bg.png)无重复；背景尺寸：100% 100%；背景-附件：固定；Url(images/beijing.png)——图片路径的位置；No-repeat——图片不重复；

　　Center 0px——center是从页面左侧开始的位置，0px是从页面顶部开始的位置；

　　背景-位置：中心03354是图片的定位，同上；

　　背景-尺寸：封面；3354将背景图像放大到足够大，使背景图像完全覆盖背景区域。背景图像的某些部分可能不会显示在背景定位区域中；

　　最小高度：100vh3354窗口的高度，“视口”是指浏览器内部可视区域的大小，即window.innerWidth/窗口的大小。内高。

02

　　背景：url(bg.png )无重复；身高：100%；宽度：100%；溢出：隐藏；背景-尺寸：封面；//或者背景尺寸：100%；

03

　　将背景图像分配给body标记，以便背景图像可以填充整个浏览器视口。事实上，这种方案对所有块级容器都有效。块容器的宽度和高度是动态的，因此背景图像会自动扩展和收缩以填充整个容器。

　　css body标签的样式如下：

　　body {/* Load background image */background-image:URL(images/BG . jpg)；/*背景图像纵横居中*/background-position: center居中；/*背景图像未平铺*/background-repeat:no-repeat；/*当内容高度大于图片高度时，背景图像的位置相对于视口是固定的*/background-attachment:fixed；/*根据容器大小制作背景图像比例*/background-size:cover；/*设置背景色，背景色将在背景图片加载过程中显示*/background-color:# 464646；}就是这样。本文介绍了CSS实现全屏自适应背景图像的三种方法。更多相关CSS后台全屏适配内容，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。