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>
