CSS学习笔记11 CSS背景
background-color：背景色
前面我們經常用background-color這個屬性來設置元素的背景色，例如下面這條css可將段落的背景色設置為灰色
p {background-color: gray;}如果想要元素的背景色向外延伸，則只需增加內邊距即可
background-color可以為所有元素設置背景色，這包括 body 一直到 em 和 a 等行內元素。
注意：background-color 不能繼承，其默認值是 transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見。
?
background-image：背景圖像
除了可以為元素設置背景色之外，還可以用background-image屬性為元素設置背景圖像，其默認值是 none，表示元素背景上沒有放置任何圖像。
如果需要設置一個背景圖像，必須為這個屬性設置一個 URL 值：
body {background-image: url(img/a.jpg);}通常情況下背景應用于 body 元素。
注意：同background-color一樣，background-image 也不能繼承，事實上，所有背景屬性都不能繼承。背景圖片會蓋住背景顏色。也就是說背景圖片的優先級要高于背景色。
?
background-repeat：背景重復
上面中的例子中，我們看到圖片鋪滿了整個屏幕，如果需要設置是否需要平鋪以及平鋪的方向，可以使用background-repeat屬性
| 屬性值 | 效果 |
| repeat | 水平垂直方向上都平鋪 |
| repeat-x | 水平方向上平鋪 |
| repeat-y | 垂直方向上平鋪 |
| no-repeat | 不平鋪 |
?
?
?
?
?
?
?
?
?
background-position：背景定位
默認情況下，背景圖片的位置的在元素的左上角，這時可以利用 background-position 屬性改變圖像在背景中的位置。
?
background-position可能的值
?
background-attachment：背景關聯
scroll： 默認值，背景圖像會隨著頁面其余部分的滾動而移動。
fixed：固定顯示，相對于body固定。一般只用于body的背景設置。
?
屬性合寫
可以將上面講到的屬性用background屬性進行合寫，通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支持，而且需要鍵入的字母也更少。
background合寫的順序： 背景顏色、背景圖地址、平鋪設置、背景圖滾動、背景圖位置。如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS屬性合寫</title> 6 <style type="text/css"> 7 body { 8 background: yellow url(img/a.jpg) no-repeat scroll center top; 9 } 10 </style> 11 </head> 12 <body> 13 <p>段落1</p> 14 <p>段落2</p> 15 ... 16 <p>段落20</p> 17 </body> 18 </html>總結
以上是生活随笔為你收集整理的CSS学习笔记11 CSS背景的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html中的锚点
- 下一篇： 纯CSS3美化单选按钮radio