background 屬性
阿新 • • 發佈：2022-04-16
一、background 屬性集
| 值 | 說明 |
|---|---|
| background-color | 指定要使用的背景顏色 |
| background-position | 指定背景影象的位置 |
| background-size | 指定背景圖片的大小 |
| background-repeat | 指定如何重複背景影象 |
| background-origin | 指定背景影象的定位區域 |
| background-clip | 指定背景影象的繪畫區域 |
| background-attachment | 設定背景影象是否固定或者隨著頁面的其餘部分滾動。 |
| background-image | 指定要使用的一個或多個背景影象 |
二、屬性集詳解
1、background-color
| 值 | 描述 |
|---|---|
| color | 指定背景顏色。顏色值有3種寫法：文字、十六進位制、RGB |
| transparent | 指定背景顏色應該是透明的。這是預設 |
div{
background-color:yellow;
}
h1{
background-color:#00ff00;
}
p{
background-color:rgb(255,0,255);
}
2、 background-position
| 值 | 描述 |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | 如果僅指定一個關鍵字，其他值將會是"center" |
| x% y% | 第一個值是水平位置，第二個值是垂直。左上角是0％0％。右下角是100％100％。如果僅指定了一個值，其他值將是50％。 。預設值為：0％0％ |
| xpos ypos | 第一個值是水平位置，第二個值是垂直。左上角是0。單位可以是畫素（0px0px）。如果僅指定了一個值，其他值將是50％。你可以混合使用％和positions |
| inherit | 指定background-position屬性設定應該從父元素繼承 |
3、background-size
| 值 | 描述 |
|---|---|
| length | 設定背景圖片高度和寬度。第一個值設定寬度，第二個值設定的高度。如果只給出一個值，第二個是設定為 auto |
| percentage | 將計算相對於背景定位區域的百分比。第一個值設定寬度，第二個值設定的高度。如果只給出一個值，第二個是設定為"auto(自動)" |
| cover | 此時會保持影象的縱橫比並將影象縮放成將完全覆蓋背景定位區域的最小大小。 |
| contain | 此時會保持影象的縱橫比並將影象縮放成將適合背景定位區域的最大大小。 |
4、background-repeat
| 值 | 說明 |
|---|---|
| repeat | 背景影象將向垂直和水平方向重複。這是預設 |
| repeat-x | 只有水平位置會重複背景影象 |
| repeat-y | 只有垂直位置會重複背景影象 |
| no-repeat | background-image 不會重複 |
5、background-origin
| 值 | 描述 |
|---|---|
| padding-box | 背景影象填充框的相對位置 |
| border-box | 背景影象邊界框的相對位置 |
| content-box | 背景影象的相對位置的內容框 |
6、background-attachment
| 值 | 描述 |
|---|---|
| scroll | 背景圖片隨著頁面的滾動而滾動，這是預設的。 |
| fixed | 背景圖片不會隨著頁面的滾動而滾動。 |
| local | 背景圖片會隨著元素內容的滾動而滾動。 |
四、常見背景屬性設定
body{
background-image:url('圖片地址');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}