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中會有更多的相關屬性之後學習到了會在做介紹。