CSS 背景屬性background簡寫攻略

2021-08-29 15:48:20 字數 1087 閱讀 1372

background-color 背景顏色: 合法的顏色值

background-image 背景影象: url( )

background-repeat 如何重複背景影象: no-repeat,repeat,repeat-x,repeat-y

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

background-position 背景影象的位置:(left center right) (top center bottom)/x% y%/ xpx ypx

background-size 背景的尺寸:cover(依靠長邊縮放),contain(影象依靠短邊縮放)/x% y%/xpx ypx

不常用的2個屬性:

background-origin 背景的定位區域:border-box/padding-box/content-box

background-clip 背景的繪製區域。border-box/padding-box/content-box

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
如果background-position和background-size同時設定,需要在background-size前面加「/」,類似的簡寫語法在font和border-radius中也有。

注意:如果簡寫形式中含有background-size屬性,那麼必須同時寫上background-position屬性,如果省略了就會導致樣式失效。

總結就是:size和position屬性在簡寫的情況下,要麼都寫,要麼都不寫。都寫的時候size前面需要加/

CSS背景屬性

背景顏色屬性 background color 這個屬性為html元素設定背景顏色,相當於html中bgcolor屬性。body 上面的 表示body這個html元素的背景顏色是翠綠色的。背景屬性 background image 這個屬性為html元素設定背景,相當於html中background...

CSS背景屬性

一 背景顏色 屬性 background color 取值 任何合法顏色或者transparent 注意 背景顏色會填充到元素的內容區域以及邊框區域 二 背景影象 作用 以圖象作為元素的背景 屬性 background image 取值 url 背景影象路徑 三 背景重複 屬性 background...

css背景屬性

css背景屬性 目錄 background attachment背景附件 設定背景影象是否固定或者隨著頁面的其餘部分滾動 background clip背景修剪 規定背景的繪製區域 background origin背景 規定 background position 屬性相對於什麼位置來定位 bac...