1. 程式人生 > >CSS中background系列屬性介紹

CSS中background系列屬性介紹

在CSS中background充當著背景圖的意義,(在CSS3中會有更多的相關屬性),這邊小編介紹一下background系列屬性中不存在相容性問題的一些屬性。之後再學習了CSS3後會在寫部落格進行對該類的補充。

1.background-color

從語義上看就是新增背景顏色

方法一:直接以顏色英文來寫 例:background-color:red;

很明顯這種表示方式不足以描述所有的顏色在實踐中用得少一點。那麼引申到

方法二:background-color:rgb(000,000,000),rgb表示三原色,紅、綠、藍。括號內三位數由0~255,相應組合表示顏色rgb(0,0,0)代表黑色,rgb(255,255,255)代表白色。

由於16進位制也是從0~255;所以更多時候用16進製表示,在遇到上色時圖片編輯軟體一般就能直接給你返還16進位制數表示顏色所以只要知道該方法就行,沒必要去糾結如何調色。至於進位制小編這裡就不介紹了,可以在網上了解一下。

2.background-image

該屬性是往背景裡插圖片。

格式為background-image:url(圖片地址);

如若盒子比圖大,再不做任何操作情況下圖片會類似於複製一樣自動填充滿整個盒子。

注:padding填充部分也會算進背景中。

3.background-repeat

該屬性可以使背景圖片不重複或按要求重複

background-repeat:no-repeat;    //圖片不重複

background-repeat:-x;                //只在x軸上重複

y軸同理

4.background-position

該屬性表示對圖片在盒子中的定位

我們把盒子左上角看為座標原點0,0畫素然後以畫素移動,也可以是負數在表示時。

在該屬性中有一個叫做CSS精靈的一個東西感興趣可以去看一下

以畫素我們是給予精確的定位

同時我們也可以以英文來進行一個大概定位

描述左右的詞: left、 center、right

描述上下的詞: top 、center、bottom

兩者結合就可以使得在盒子中定位

例:background-position: right bottom;  表示右下角

5.background-attachment

background-attachment:fixed;    //會使得圖片不隨滾動條滾動而移動

6.background綜合屬性

可以用一條語句來表示上述所有屬性,我們按照每一個屬性的屬性格式來寫系統能判定到你需要的操作,但方便觀看理解一般以小編介紹的順序寫。

例:

background:red url(1.jpg) no-repeat 100px 100px fixed;

等價於:

background-color:red;

background-image:url(1.jpg);

background-repeat:no-repeat;

background-position:100px 100px;

background-attachment:fixed;

這裡小編先介紹這麼多,在CSS3中會有更多的相關屬性之後學習到了會在做介紹。