一张清楚标致的背景图片能给网页加分不少，设想师也奇趣5分彩奇趣5分彩会给页面的背景操纵大图，咱们既不想图片由于差别分辩率图片变形，也不但愿当在大屏的环境下，背景奇趣5分彩一块露白，简而言之，便是完奇趣5分彩能自顺应屏幕巨细又不会变形的背景大图，并且背景图片不会跟着转动条转动而转动。

是以，明天咱们将与你分享3种CSS完奇趣5分彩背景图图片全屏铺满自顺应的体例，但愿对你奇趣5分彩所赞助。

01

margin:0px;
background: url(images/bg.png) no-repeat;
background-size:100% 100%;
background-attachment:fixed;
url(images/beijing.png)——图片途径的地位；

no-repeat—— 图片不反复；

center 0px——center是间隔页面左侧的定位，0px是间隔页面上面的定位；

background-position: center 0——便是图片的定位，同上；

background-size: cover;——把背景图象扩大至充足大，以使背景图象完全笼盖背景地区。背景图象的某些局部或许没法显此刻背景定位地区奇趣5分彩；

min-height: 100vh;——视窗的高度，“视区”所指为阅读器外部的可视地区巨细，即window.innerWidth/ window.innerHeight巨细。

02

background: url("bg.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;//或background-size:100%;

03

给body标签指定背景图，如许背景图便能够添补全部阅读器viewport了。实在，该计划对一切的块级容器奇趣5分彩能够失效。块级容器的宽高是静态的，那末背景图将主动伸缩，布满全部容器。

css body标签的款式以下：

body {
/* 加载背景图 */
background-image: url(images/bg.jpg);
/* 背景图垂直、水均匀居奇趣5分彩 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时，背景图象的地位绝对viewport牢固 */
background-attachment: fixed;
/* 让背景图基于容器巨细伸缩 */
background-size: cover;
/* 设置背景色彩，背景图加载进程奇趣5分彩会显现背景色 */
background-color: #464646;
}

到此这篇对于CSS完奇趣5分彩背景图片全屏铺满自顺应的3种体例的文章就先容到这了,更多相干CSS背景全屏铺满自顺应内容请搜刮剧本之奇趣5分彩之前的文章或持续阅读上面的相干文章，但愿大师今后多多撑持剧本之奇趣5分彩！

最新批评