CSS3 的背景属性

㈠background-size 属性

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

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

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

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

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

 <!DOCTYPE html>
 <html>
 <head>
 <style>
     body
          {
              background:url(../图片/7.jpg);
              background-size:200px 160px;
              background-repeat:no-repeat;
              padding-top:150px;
          }
 </style>
 <title>调整背景图片大小</title>
 </head>

 <body>
 <p>上面是缩小的背景图片。</p>

 <p>原始图片：<img src="../图片/7.jpg"></p>

 </body>
 </html>

效果图：

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

 <!DOCTYPE html>
 <html>
 <head>
 <style>
      div{
            background:url(../图片/8.jpg);
            background-size:35% 100%;
            background-repeat:no-repeat;
          }
 </style>
 <title>对背景图片进行拉伸，使其完成填充内容区域</title>
 </head>
 <body>

 <div>
 <p>重复是最好的老师。</p>
 <p>重复是最好的老师。</p>
 <p>重复是最好的老师。</p>
 <p>重复是最好的老师。</p>
 <p>重复是最好的老师。</p>
 <p>重复是最好的老师。</p>
 <p>重复是最好的老师。</p>
 <p>重复是最好的老师。</p>
 <p>重复是最好的老师。</p>
 </div>

 </body>
 </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 中定位背景图片

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div
 {
 border:1px solid black;
 padding:35px;
 background-image:url('1.jpg');
 background-repeat:no-repeat;
 background-position:left;
 }
 #div1
 {
 background-origin:border-box;
 }
 #div2
 {
 background-origin:content-box;
 }
 </style>
 </head>
 <body>

 <p>background-origin:border-box:</p>
 <div id="div1">
 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
 </div>

 <p>background-origin:content-box:</p>
 <div id="div2">
 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
 </div>

 </body>
 </html>

效果图：

㈢多重背景图片 

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body
 {
 background-image:url(../图片/8.jpg),url(../图片/7.jpg);
 }
 </style>
 <title>多重背景</title>
 </head>
 <body>

 </body>
 </html>

 效果图：

㈣background-clip 属性

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

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

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

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div
 {
 width:300px;
 height:300px;
 padding:50px;
 background-color:yellow;
 background-clip:content-box;
 border:2px solid #92b901;
 }
 </style>
 <title>规定背景的绘制区域</title>
 </head>
 <body>

 <div>
 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
 </div>

 </body>
 </html>

 效果图：

     希望有所帮助！