1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 /* 凡是背景background，一定要有高度！！！ */
11 body{
12 margin: 0;
13 }
14
15 /* 背景颜色 */
16 .background-color {
17 height: 500px;
18 /*
19 rgba: rgba->(0,0,0,.7); a透明度
20 hex:#000;
21 rgb:(0,0,0);
22 name:black
23 */
24 background-color: #000;
25 }
26
27 /* 记得广告常用语隐藏 */
28 .background-attachment {
29 background-image: url('./酷狗写真.jpg');
30 /*
31
32 fixed:固定不动
33 scroll:随页面滚动(默认)
34 */
35 background-attachment: fixed;
36 height: 1000px;
37 }
38
39 /* 背景图片 */
40 .background-image {
41 background-image: url('./酷狗写真.jpg');
42 /*
43 url(''); || url();
44 none:无
45
46 */
47 height: 1000px;
48 }
49
50
51 /* 背景是否重复 */
52 .background-repeat {
53 /*
54 round:四周拉宽至100%
55 space:保持缩放比
56 no-repeat:不重复
57 inherit:继承父类
58 initial:继承父类
59 repeat:重复(默认
60 repeat-x:重复x轴
61 repeat-y:重复y轴
62 */
63 height: 1000px;
64 background-repeat: no-repeat;
65 background-image: url('./酷狗写真.jpg');
66 }
67
68 .background-position {
69 background-repeat: no-repeat;
70 /*
71 background-position:x轴 y轴 (偏移量) ->百分比、其它单位...
72 top left
73 top center
74 top right
75 center left
76 center center
77 center right
78 bottom left
79 bottom center
80 bottom right
81 x% y%
82 xpos ypos
83 */
84 background-position: 20px 20px;
85 height: 1000px;
86 background-image: url('./酷狗写真.jpg');
87 background-color: #000;
88 }
89
90
91 .background-size {
92 background-image: url('./酷狗写真.jpg');
93 background-size: 10% 20%;
94 /*
95 background-size:x轴 y轴(可数值，可百分比)
96 background-size:x轴+y轴
97 background-size:cover(铺满背景图)
98 background-size:contain(按最佳比例，可能会有空白区域)
99 */
100 background-size: cover;
101 }
102
103
104 .background {
105 /*
106 background-position:x轴 y轴 (偏移量)
107 background: url('./酷狗写真.jpg') no-repeat top left fixed;
108
109 规范的写法是(顺序官方也是没有限制的,不用的属性可以不用填写,但官方建议如下->为了效率和统一css写法，我们都应该采用这种方式)：
110 background-color-> background-image-> background-repeat-> background-attachment-> background-position
111 */
112 height: 2000px;
113 background: url('./酷狗写真.jpg') no-repeat fixed top left ;
114 background-size: cover;
115 }
116 </style>
117 </head>
118
119 <body>
120 <!-- <div class="background-color"></div> -->
121 <!-- <div class="background-attachment"></div> -->
122 <!-- <div class="background-image"></div> -->
123 <!-- <div class="background-repeat"></div> -->
124 <!-- <div class="background-position"></div> -->
125 <div class="background"></div>
126 </body>
127
128 </html>
