background簡寫屬性

2021-07-02 14:38:35 字數 1066 閱讀 6614

在css中有多個屬性用於設定背景樣式,其中

background-color:設定背景顏色。

background-repeat:設定是否以及如何重複背景影象

background-position:設定背景影象的起始位置

background-attachment:設定背景影象是否固定或者隨著頁面的其餘部分滾動

我們可以分別使用以上單個屬性,但通常建議使用background簡寫屬性,這在較老的瀏覽器中有更好的支援,更加簡潔。

background : background-color background-image background-repeat background-attachment background-position

在使用background簡寫背景屬性時,可以按照上面的順序依次設定各個屬性,也可以不設其中某些值,css會自動設定其預設值。

css3中新增的背景屬性:

1.background -clip:規定背景的繪製區域。

屬性值:1)border-box:背景被裁剪到邊框盒

2)padding-box:背景被裁剪到內邊距框

3)content-box:背景被裁剪到內容框

2.background-origin:規定 background-position 屬性相對於什麼位置來定位。

屬性值:1)border-box:背景影象相對於邊框盒來定位。

2)padding-box:背景影象相對於內邊距框來定位。

3)content-box:背景影象相對於內容框來定位。

3background-size:規定背景影象的尺寸。

屬性值:1)length:設定背景影象的高度和寬度。第乙個值設定寬度,第二個值設定高度。如果只設定乙個值,則第二個值會被設定為 "auto"

2)percentage:以父元素的百分比來設定背景影象的寬度和高度。第乙個值設定寬度,第二個值設定高度。如果只設定乙個值,則第二個值會被設定為 "auto"。

3)cover:把背景影象擴充套件至足夠大,以使背景影象完全覆蓋背景區域。

4)contain:把影象影象擴充套件至最大尺寸,以使其寬度或高度完全適應內容區域。

CSS 背景屬性background簡寫攻略

background color 背景顏色 合法的顏色值 background image 背景影象 url background repeat 如何重複背景影象 no repeat,repeat,repeat x,repeat y background attachment 背景影象是否固定或者隨...

background相關屬性

background origin 規定 background position 屬性相對於容器的哪一部分來定位。padding box 背景影象相對於內邊距框來定位 預設 border box背景影象相對於邊框盒來定位 content box背景影象相對於內容框來定位。background pos...

背景(background)屬性

background 背景屬性 background attachment 背景影象是否固定或者隨著頁面的其餘部分滾動background color 設定背景顏色 color 指定背景顏色 transparent 預設。背景顏色透明 inherit 從父元素繼承 url 影象路徑 none 預設。...