一、背景切割
background-clip ：border-box | padding-box | content-box
作用：為將背景圖片做適當的裁剪，以適應需要。
默認格式 background-clip ：border-box，border的區域也有背景圖，但是背景圖圖片是從border-top和border-left的位置開始平鋪的，所以當背景圖片no-repeat的時候，border-top和border-left的背景是背景色不是背景圖，只有當背景repeat的時候，border-top和border-left才是背景圖，並且border-top和border-left的背景是從圖片的下邊和右邊開始平鋪的。
比如：
使用的背景圖 bac.jpg
當背景no-repeat的時候：
代碼：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .div1{ 8 width: 300px; 9 height: 300px; 10 border:50px dashed green; 11 font-size: 60px; 12 color: #fff; 13 padding: 30px; 14 margin: 30px; 15 background: #fff url(bac.jpg) 0 0 no-repeat; 16 background-clip: border-box; 17 /*background-clip: padding-box;*/ 18 /*background-clip: content-box;*/ 19 } 20 </style> 21 </head> 22 <body> 23 <div class="div1">過后覅計划公交窖口換IP感覺</div> 24 </body> 25 </html>
效果一：
當背景repeat的時候：
代碼：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .div1{ 8 width: 300px; 9 height: 300px; 10 border:50px dashed green; 11 font-size: 60px; 12 color: #fff; 13 padding: 30px; 14 margin: 30px; 15 background: #fff url(bac.jpg) 0 0 no-repeat; 16 background-clip: border-box; 17 /*background-clip: padding-box;*/ 18 /*background-clip: content-box;*/ 19 } 20 </style> 21 </head> 22 <body> 23 <div class="div1">過后覅計划公交窖口換IP感覺</div> 24 </body> 25 </html>
效果二：
二、背景原點
background-origin ：border-box | padding-box | content-box
作用：決定圖片的原始起始位置
比如上面的效果二，背景圖片大於divd的寬高，但是border-top和border-left的背景是背景色是拉伸的，如果想要整個div就是一張圖而沒有平鋪效果，怎么辦呢？這就要使用background-origin 的配合，把background-origin 設置成background-origin ：border-box即可。background-clip和background-origin 就像一對好基友，一般都配合使用。
代碼：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .div1{ 8 width: 300px; 9 height: 300px; 10 border:50px dashed green; 11 font-size: 60px; 12 color: #fff; 13 padding: 30px; 14 margin: 30px; 15 background: #fff url(bac.jpg) 0 0 no-repeat; 16 background-clip: border-box; 17 /*background-clip: padding-box;*/ 18 /*background-clip: content-box;*/ 19 background-origin: border-box; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="div1">過后覅計划公交窖口換IP感覺</div> 25 </body> 26 </html>
效果：
background-clip和background-origin的區別:
background-clip是用來設置div（元素）中背景（包括背景色和背景圖）的起始位置，而background-origin是截取的背景圖的起始位置。
當有background-origin: content-box的時候：
沒有background-origin: content-box的時候：
從以上兩張圖可以明顯看到截取的背景圖位置不一樣，當沒有background-origin是背景圖默認是從padding-top和padding-left截取的，當有background-origin，背景圖截取的位置是有background-origin來決定的。
代碼：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .div1{ 8 width: 200px; 9 height: 200px; 10 border:50px dashed green; 11 font-size: 60px; 12 color: #fff; 13 padding: 100px; 14 margin: 30px; 15 background: #f00 url(bac.jpg) 0 0 no-repeat; 16 background-clip: content-box; 17 background-origin: content-box; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="div1"></div> 23 </body> 24 </html>
三、背景尺寸
background-size ：length/ percentage/ auto/ cover/contain
作用：設置背景圖的大小。
length： 長度值指定,代為px，接受兩個數值如：background-size:400px 400px;，分別為寬、高，也可以設定一個數值，當只有一個數值是，背景長度為此數值，高度等比例伸縮。
percentage： 按背景圖的百分比進行伸縮，也可以接受兩個或者一個數值如：background-size:100% 100%;
auto： 真實大小如：background-size:auto;
cover：等比縮放到完全覆蓋容器，背景圖像有可能超出容器 如：background-size:cover;
contain： 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內如：background-size:contain;
例子：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .div1{ 8 width: 200px; 9 height: 200px; 10 border:50px dashed green; 11 padding: 100px; 12 margin: 30px; 13 background: #000 url(bac.jpg) 0 0 no-repeat; 14 /*background-size:400px 400px;*/ 15 /*background-size:100% 100%;*/ 16 /*background-size:auto;*/ 17 background-size:cover; 18 /*background-size:contain;*/ 19 } 20 </style> 21 </head> 22 <body> 23 <div class="div1"></div> 24 </body> 25 </html>
效果：
四、透明背景
background:rgba(255,0,0,0.6)
接受四參數，前3個為顏色參數范圍0-255，最后一個為透明度范圍0-1，數值越到透明度越小。
例子：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body{ 8 color: #fff; 9 background: #000; 10 } 11 div{ 12 color: #fff; 13 font-size: 50px; 14 font-weight: bold; 15 background: rgba(255,255,255,0.5); 16 position: absolute; 17 } 18 </style> 19 </head> 20 <body> 21 <div>會后集合與交通</div> 22 </body> 23 </html>
效果：
五、漸變背景
線性漸變：linear-gradient
徑向漸變： radial-gradient
background:-webkit-linear | radial-gradient (水平起點 垂直起點 角度, 顏色1 0%, 顏色2 漸變到的位置百分比%, ... ,顏色N 100%);
如：background: -webkit-gradient(linear,left center,right center,from(yellow),color-stop(0.5,black),color-stop(0.5,#fff),to(blue));
線性漸變例子：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 height: 100px; 9 width: 100px; 10 background: -webkit-gradient(linear,left center,right center,from(yellow),color-stop(0.5,black),color-stop(0.5,#fff),to(blue)); 11 } 12 </style> 13 </head> 14 <body> 15 <div></div> 16 </body> 17 </html>
效果：
關於gradient的前綴：
-webkit-:蘋果、谷歌
-ms-：ie
-moz-:火狐
-o-:歐朋
徑向漸變例子：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 height: 100px; 9 width: 100px; 10 border-radius: 50px; 11 background: -webkit-gradient(radial,30 30,1,30 30,100,from(#fff),color-stop(0.3,yellow),to(blue)); 12 } 13 </style> 14 </head> 15 <body> 16 <div></div> 17 </body> 18 </html>
效果：
