背景属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7 
 8         .box{
 9             width:300px;
10             height:500px;
11             background-color:#999;
12             background-image:url("1.png");
13             /* 不平铺 */
14             background-repeat:no-repeat;
15 
16             /* 沿x轴平铺 */
17             /* background-repeat:repeat-x; */
18 
19             /* 沿y轴平铺 */
20             /* background-repeat:repeat-y; */
21             background-position:center;
22             background-attachment:scroll;
23         }
24 
25     </style>
26 </head>
27 <body>
28     <div class="box">
29     <p>滚动</p>
30     <p>滚动</p>
31     <p>滚动</p>
32     <p>滚动</p>
33     <p>滚动</p>
34     <p>滚动</p>
35     <p>滚动</p>
36     <p>滚动</p>
37     <p>滚动</p>
38     <p>滚动</p>
39     <p>滚动</p>
40     <p>滚动</p>
41     <p>滚动</p>
42     <p>滚动</p>
43     <p>滚动</p>
44     <p>滚动</p>
45     <p>滚动</p>
46     <p>滚动</p>
47     <p>滚动</p>
48     <p>滚动</p>
49     <p>滚动</p>
50     <p>滚动</p>
51     <p>滚动</p>
52     <p>滚动</p>
53     <p>滚动</p>
54     </div>
55 </body>
56 </html>

背景属性:
1.background-color 背景颜色
2.background-image 背景图片
3.background-repeat 背景平铺
平铺的几个属性：repeat(默认平铺) no-repeat(不平铺) repret-x(沿x轴平铺) repret-y(沿y轴平铺)
4.background-position 背景定位
方位词：left right center top bottom

特点： background-position:right;
  ★方位值只写一个时，另一个值默认居中
   background-position:bottom center;
  ★写两个方位值时，顺序没有要求
   background-position:30px 20px;
  ★写两个数值时，第一个值代表水平方向，第二个值代表垂直方向，如果写一个，则代表left，另一个默认居中
5.background-attachment 背景滚动
  scroll（滚动）fixed（固定）

猜你喜欢