1 <style> 2 div{ 3 width: 100%; 4 height: 150px; 5 border: 1px solid red; 6 /*overflow: scroll;*/ 7 /*1.添加背景颜色*/ 8 /*background-color: blue;*/ 9 /*2.添加背景图片 10 如果图片大于容器，那么默认就从容器左上角开始放置 11 如果图片小于容器，那么图片默认会平铺*/ 12 /*background-image: url("../img/d1.jpg");*/ 13 background-image: url("../img/h_bg.jpg"); 14 /*3.设置背景平铺 15 round：会将图片进行缩放之后再平铺 16 space:图片不会缩放平铺，只会在图片之间产生间距值 17 */ 18 /*background-repeat: round;*/ 19 /*4.设置在滚动容器的背景行为：跟随滚动/固定*/ 20 /*fixed：背景图片的位置固定不变 21 scroll:当前滚动容器的时候，背景图片也会跟随滚动 22 */ 23 /*local和scroll的区别：前提是滚动当前容器的内容 24 loccal：背景图片会跟随内容一起滚动 25 scroll：背景图片不会跟随内容一起滚动 26 */ 27 /*background-attachment: local;*/ 28 29 30 /*background-size:设置背景图片的大小 宽度/高度 宽度/auto（保持比例自动缩放） 31 建议：在使用这个属性之前确定宽高比与容器的宽高比是一致，否则会造成图片失贞变形 32 */ 33 /*background-size: 50px 50px;*/ 34 /*设置百分比，是参照父容器可放置内容区域的百分比*/ 35 /*background-size: 50% 50%;*/ 36 /*设置contain：按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，是图片包含在容器内 37 1.图片大于容器：可能会造成空白区域，将图片缩小 38 2.图片小于区域：可能造成空白区域，将图片放大 39 */ 40 /*background-size: contain;*/ 41 /*cover:与contain刚好相反，背景图片会按比例缩放自适应整个背景区域，如果背景区域不足以所有背景图片，图片会溢出 42 1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见 43 2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容溢出 44 */ 45 background-size: cover; 46 /*图片始终保持在页面的中间*/ 47 background-position: center; 48 } 49 </style>