CSS學習筆記11 CSS背景

時間 2019-12-06

標籤 css 學習筆記背景欄目 CSS 简体版

原文原文鏈接

background-color：背景色

前面咱們常常用background-color這個屬性來設置元素的背景色，例以下面這條css可將段落的背景色設置爲灰色css

p {background-color: gray;}

若是想要元素的背景色向外延伸，則只需增長內邊距便可html

background-color能夠爲全部元素設置背景色，這包括 body 一直到 em 和 a 等行內元素。瀏覽器

注意：background-color 不能繼承，其默認值是 transparent。transparent 有「透明」之意。也就是說，若是一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。app

background-image：背景圖像

除了能夠爲元素設置背景色以外，還能夠用background-image屬性爲元素設置背景圖像，其默認值是 none，表示元素背景上沒有放置任何圖像。ide

若是須要設置一個背景圖像，必須爲這個屬性設置一個 URL 值：url

body {background-image: url(img/a.jpg);}

一般狀況下背景應用於 body 元素。spa

注意：同background-color同樣，background-image 也不能繼承，事實上，全部背景屬性都不能繼承。背景圖片會蓋住背景顏色。也就是說背景圖片的優先級要高於背景色。3d

background-repeat：背景重複

上面中的例子中，咱們看到圖片鋪滿了整個屏幕，若是須要設置是否須要平鋪以及平鋪的方向，可使用background-repeat屬性code

屬性值orm	效果
repeat	水平垂直方向上都平鋪
repeat-x	水平方向上平鋪
repeat-y	垂直方向上平鋪
no-repeat	不平鋪

background-position：背景定位

默認狀況下，背景圖片的位置的在元素的左上角，這時能夠利用 background-position 屬性改變圖像在背景中的位置。

background-position可能的值

background-attachment：背景關聯

scroll：默認值，背景圖像會隨着頁面其他部分的滾動而移動。
fixed：固定顯示，相對於body固定。通常只用於body的背景設置。

 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-image: url(img/a.jpg);
 9             background-repeat: no-repeat;
10             background-attachment: fixed;
11         }
12     </style>
13 </head>
14 <body>
15     <p>圖像不會隨頁面的其他部分滾動。</p>
16     <p>圖像不會隨頁面的其他部分滾動。</p>
17     ...
18     <p>圖像不會隨頁面的其他部分滾動。</p>
19 </body>
20 </html>

屬性合寫

能夠將上面講到的屬性用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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。