css3-11 如何改變背景圖片的大小和位置
一、總結
一句話總結：css3相對css2本身就支持改變背景圖片的大小和位置。
1、怎么設置背景不填充padding部分？
background-origin
3)content-box
#有效區域
18 background-origin:content-box;
2、如何改變背景圖片的大小？
background-size屬性
17 background-size:100%;
background-size:100% 100%;
3、背景如何使用多重圖？
url可以累加
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
4、如何裁剪背景圖片？
background-clip屬性，這個方法的屬性值和background-origin一樣
background-clip: content-box;
5、background-origin和background-clip設置背景圖的區別（都限定了背景圖出現的位置）？
一個裁剪了背景圖，一個背景圖還是原圖，只是 放的位置不同了，縮放比例不同而已
二、如何改變背景圖片的大小和位置
1、相關知識
背景樣式:
1.background-size
background-size:100%;
#背景圖大小
2.background-origin
1)border-box
#邊框區域
2)padding-box
#內邊距區域
3)content-box
#有效區域
1.background-size
background-size:100%;
#背景圖大小
2.background-origin
1)border-box
#邊框區域
2)padding-box
#內邊距區域
3)content-box
#有效區域
新的背景屬性
| 順序 | 描述 | CSS |
|---|---|---|
| background-clip | 規定背景的繪制區域。 | 3 |
| background-origin | 規定背景圖片的定位區域。 | 3 |
| background-size | 規定背景圖片的尺寸。 | 3 |
2、代碼
背景圖大小和位置
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微軟雅黑; 9 } 10 11 div{ 12 width:500px; 13 height:500px; 14 border:10px solid transparent; 15 padding:10px; 16 background:url('b.png') no-repeat; 17 background-size:100%; 18 background-origin:border-box; 19 } 20 </style> 21 </head> 22 <body> 23 <div> 24 <p>linux is very much!</p> 25 <p>linux is very much!</p> 26 <p>linux is very much!</p> 27 <p>linux is very much!</p> 28 <p>linux is very much!</p> 29 </div> 30 </body> 31 </html>
裁剪背景圖
<style> #example1 { border: 10px dotted black; padding:35px; background: yellow; } #example2 { border: 10px dotted black; padding:35px; background: yellow; background-clip: padding-box; } #example3 { border: 10px dotted black; padding:35px; background: yellow; background-clip: content-box; } </style>
