CSS3 的背景属性

㈠background-size 属性

⑴background-size 属性规定背景图片的尺寸。

⑵在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许在不同的环境中重复使用背景图片。

⑶能以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

⑷语法：background-size: length|percentage|cover|contain;

⑸示例1：调整背景图片的大小

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style> 
 5     body
 6          {
 7              background:url(../图片/7.jpg);
 8              background-size:200px 160px;
 9              background-repeat:no-repeat;
10              padding-top:150px;
11          }
12 </style>
13 <title>调整背景图片大小</title>
14 </head>
15 
16 <body>
17 <p>上面是缩小的背景图片。</p>
18 
19 <p>原始图片：<img src="../图片/7.jpg"></p>
20 
21 </body>
22 </html>

效果图：

⑹示例2：对背景图片进行拉伸，使其完成填充内容区域

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style> 
 5      div{
 6            background:url(../图片/8.jpg);
 7            background-size:35% 100%;
 8            background-repeat:no-repeat;
 9          }
10 </style>
11 <title>对背景图片进行拉伸，使其完成填充内容区域</title>
12 </head>
13 <body>
14 
15 <div>
16 <p>重复是最好的老师。</p>
17 <p>重复是最好的老师。</p>
18 <p>重复是最好的老师。</p>
19 <p>重复是最好的老师。</p>
20 <p>重复是最好的老师。</p>
21 <p>重复是最好的老师。</p>
22 <p>重复是最好的老师。</p>
23 <p>重复是最好的老师。</p>
24 <p>重复是最好的老师。</p>
25 </div>
26 
27 </body>
28 </html>

效果图：

㈡background-origin 属性

⑴background-origin 属性规定 background-position 属性相对于什么位置来定位。

⑵如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

⑶background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

⑷语法：background-origin: padding-box|border-box|content-box;

⑸示例：在 content-box 中定位背景图片

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style> 
 5 div
 6 {
 7 border:1px solid black;
 8 padding:35px;
 9 background-image:url('1.jpg');
10 background-repeat:no-repeat;
11 background-position:left;
12 }
13 #div1
14 {
15 background-origin:border-box;
16 }
17 #div2
18 {
19 background-origin:content-box;
20 }
21 </style>
22 </head>
23 <body>
24 
25 <p>background-origin:border-box:</p>
26 <div id="div1">
27 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
28 </div>
29 
30 <p>background-origin:content-box:</p>
31 <div id="div2">
32 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
33 </div>
34 
35 </body>
36 </html>

效果图：

㈢多重背景图片

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style> 
 5 body
 6 {
 7 background-image:url(../图片/8.jpg),url(../图片/7.jpg);
 8 }
 9 </style>
10 <title>多重背景</title>
11 </head>
12 <body>
13 
14 </body>
15 </html>

效果图：

㈣background-clip 属性

⑴background-clip 属性规定背景的绘制区域。

⑵语法：background-clip: border-box|padding-box|content-box;

⑶示例：规定背景的绘制区域

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style> 
 5 div
 6 {
 7 width:300px;
 8 height:300px;
 9 padding:50px;
10 background-color:yellow;
11 background-clip:content-box;
12 border:2px solid #92b901;
13 }
14 </style>
15 <title>规定背景的绘制区域</title>
16 </head>
17 <body>
18 
19 <div>
20 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
21 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
22 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
23 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
24 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
25 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
26 </div>
27 
28 </body>
29 </html>

效果图：

希望有所帮助！