CSS background 屬性

1、background屬性能夠設置一個元素的背景樣式，固然前提是這個元素有具體的寬高值。

先來一個簡單的背景設置：

1         #show-box {
2             width: 800px;
3             height: 500px;
4             background: #000;
5             background-image: url(image url);
6         }
7     </style>

這裏只是簡單的設置了顏色和背景貼圖。

 

下面讓咱們來看一下官方的background的屬性：

　　語法格式：

　　background: color position size repeat origin clip attachment image;

　　注意：若是同時設置了「position」和「size」兩個屬性，應該用左斜槓「/」，而不是用空格把兩個參數值隔開：「position/size」。

1 background: url("img.jpg") center center/100% 100% no-repeat;

 

　　屬性表（圖片可能會顯示得過小，請右鍵「在新標籤中打開」以查看原圖）：

　　

 

 

　　1.color：背景顏色值。這個屬性會把整個元素添加顏色，並且處於最底層（在有背景圖片的狀況下就能夠看出）。

　　可選值：默認是透明，其餘值能夠經過查看「CSS顏色值表」來設置。

 1     <style>
 2         #show-box {
 3             width: 180px;
 4             height: 180px;
 5             border: 20px dashed #000;
 6             background-color: #000000;
 7             background-color: blue;
 8             background-color: rgb(255, 255, 255);
 9             background-color: rgba(255, 255, 255, 0.8);
10         }
11     </style>

 

　　2.position：背景圖片的定位。若是沒有圖片設置，那麼這個屬性不起效果。

　　可選值：兩個參數，水平位置和垂直位置。若是隻有一個值，第二個值爲「center」。

　　默認值是元素的左上頂角。能夠使用位置關鍵字（top，right，bottom，left，center）。百分比（以元素大小爲基值）。像素值。

 1     <style>
 2         #show-box {
 3             width: 180px;
 4             height: 180px;
 5             border: 20px dashed #000;
 6             background-position: center;
 7             background-position: center top;
 8             background-position: 0 100px;
 9             background-position: 10% 20%;
10         }
11     </style>

 

　　3.size：圖片尺寸。應用於圖片。

　　可選值：兩個數值，若是隻有一個值，第二個值爲auto。

　　默認是圖片自身大小。能夠使用像素值，百分百（以元素大小爲基值）。

　　cover：等比例縮放圖片，覆蓋這個元素。相似與windows中桌面背景的「填充」。

　　contain：等比例縮放圖片，適應元素的寬或者高。相似於windows中桌面背景的「適應」。

　　

　　　4.repeat：平鋪方式。

　　　　repeat：徹底平鋪，複製圖片把整個元素填滿。（默認）

　　　　repeat-x：水平平鋪，在水平方向複製並平鋪。

　　　　repeat-y：垂直平鋪，在垂直方向複製並平鋪。

　　　　no-repeat：不平鋪，只使用一張圖片。

　　　5.origin：背景的參考區域。

　　　可選值：border-box，padding-box，content-box。

　　　6.clip：背景的可視區域。

　　　可選值：border-box，padding-box，content-box。

　　　對比一下不一樣值的效果圖：

　　　　1.origin：border-box；clip：border-box；

 1     <style>
 2         #show-box {
 3             width: 180px;
 4             height: 180px;
 5             margin: 20px;
 6             padding: 20px;
 7             border: 20px dashed #000;
 8             background: url("img.jpg") no-repeat border-box border-box;
 9         }
10     </style>

　　　　

 

　　　　2.origin：padding-box；clip：border-box；

 1     <style>
 2         #show-box {
 3             width: 180px;
 4             height: 180px;
 5             margin: 20px;
 6             padding: 20px;
 7             border: 20px dashed #000;
 8             background: url("img.jpg") no-repeat padding-box border-box;
 9         }
10     </style>

　　　　

　　　　

　　　　3.origin：content-box；clip：border-box；

 1     <style>
 2         #show-box {
 3             width: 180px;
 4             height: 180px;
 5             margin: 20px;
 6             padding: 20px;
 7             border: 20px dashed #000;
 8             background: url("img.jpg") no-repeat content-box border-box;
 9         }
10     </style>

　　　　

 

　　　　4.origin：border-box；clip：content-box；

 1     <style>
 2         #show-box {
 3             width: 180px;
 4             height: 180px;
 5             margin: 20px;
 6             padding: 20px;
 7             border: 20px dashed #000;
 8             background: url("img.jpg") no-repeat border-box content-box;
 9         }
10     </style>

　　　　

 

　　能夠看出，origin設置的是位置，clip則會根據區域裁剪出背景圖片。

 　　

　　7.attachment：設置背景圖像是否固定或者隨着頁面的其他部分滾動。

　　默認值是scroll：背景圖片隨頁面的其他部分滾動。fixed：背景圖像是固定的。

 

　　8.多背景設置。

　　導入圖片：background-image: url(image url);

 

2、多背景設置。

　　多背景的寫法：使用逗號「，」隔開，繼續寫背景屬性。

　　background: color position size repeat origin clip attachment image, color position size repeat origin clip attachment image;

　　也能夠具體屬性單獨設置：background-image：url（image url 1），url（image url 2）；

 1     <style>
 2         #show-box {
 3             width: 180px;
 4             height: 180px;
 5             border: 20px dashed #000;
 6             background: url("img.jpg1") left top/100% 100% no-repeat,
 7             url("img.jpg2") left center/100% 100% no-repeat,
 8             url("img.jpg3") left bottom/100% 100% no-repeat,
 9             url("img.jpg4") center top/100% 100% no-repeat;
10         }
11     </style>

 

 1     <style>
 2         #show-box {
 3             width: 180px;
 4             height: 180px;
 5             border: 20px dashed #000;
 6             background-image: url("img.jpg1"), url("img.jpg2"), url("img.jpg3"), url("img.jpg4");
 7             background-position: left top, left center, left bottom, center top;
 8             background-size: 100%;
 9             background-repeat: no-repeat;
10         }
11     </style>