css background屬性

背景圖占據padding的內容,可以使用background-clip在調整

background-color 使用的背景顏色。

background-image 使用的背景圖像。

background-repeat 如何重復背景圖像。

background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動。

background-position 背景圖像的位置。

css3新增

background-size 背景圖片的尺寸。可以指定背景圖的大小,例如20% ?60px;

background-origin 背景圖片的定位區域。

background-clip 背景的繪制區域。

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

background: aquamarine

url(img.png)

no-repeat

scroll

center center / 50%

content-box content-box;


background-size 屬性

一:length

該屬性值是設置背景圖像的寬度和高度的,第一個值是寬度,第二個值是設置高度的。如果只設置第一個值,那么第二個值會自動轉換為 “auto”;

二:percentage

該屬性是以父元素的百分比來設置圖片的寬度和高度的,第一個值是寬度,第二個值是高度。如果只設置一個值,那么第二個值會被設置為 “auto”;

三:cover

把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。

四:contain

把圖像擴展至最大尺寸,以使寬度和高度 完全適應內容區域。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • background是CSS的簡寫屬性,包含了數個屬性集。 其可以用來設置一個或多個屬性: 有一些我們是很熟悉的...
    DHFE閱讀 1,880評論 0 0
  • 1. 定義和用法 background是一個簡寫屬性,可以在一個聲明中設置所有的背景屬性,可設置的屬性如下: 這些...
    lightNate閱讀 4,407評論 2 9
  • background應該是CSS里使用頻率頗高的屬性,簡單實用。但參數偏多,本篇就介紹一下background的各...
    張歆琳閱讀 4,325評論 4 26
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,792評論 0 2
  • 似花還似非花,也無人惜從教墜。拋家傍路,思量卻是,無情有思。縈損柔腸,困酣嬌眼,欲開還閉。夢隨風萬里,尋郎去處...
    行走的段子閱讀 622評論 0 1