專案總結設定元素的多個背景圖和background的運用
其實我們在專案中經常遇到這種場景一個元素或者一行會有多個圖示展示,之前我的做法就是每個圖示用 span標籤然後給它加一個背景或者是直接用img標籤載入。不過css3新出了這樣一個功能,就是一個元素可以設定多個背景圖,而且可以分別給每個背景圖設定大小和位置,這樣的話就可以在一個元素裡面設定任意位置,任意大小的背景圖(有點誇張了)。
好了,前期介紹完了,開始用程式碼說話了
background
簡寫屬性在一個宣告中設定所有的背景屬性。
可以設定如下屬性:
background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center/40px 40px;
#ff0000 : background-color 背景色
url(/i/eg_bg_03.gif) : background-image 背景圖
no-repeat : background-repeat 背景圖是否重複
fixed : background-attachment 背景影象是否固定或者隨著頁面的其餘部分滾動
center : background-position 背景圖的位置
40px 40px : background-size 背景圖的大小
這是設定一個背景圖的寫法,其中要特別注意的是background-position和background-size 的寫法,這兩個要在background中都寫的話中間一定要加 ‘/’
那麼就來看一下background三個不常用的屬性
1 background-origin 規定 background-position 屬性相對於什麼位置來定位。(如果背景影象的 background-attachment 屬性為 “fixed”,則該屬性沒有效果。)
background-origin: padding-box|border-box|content-box;
border-box 背景影象相對於邊框盒來定位。
padding-box 背景影象相對於內邊距框來定位。
content-box 背景影象相對於內容框來定位。
2 background-clip 規定背景的繪製區域
background-clip: border-box|padding-box|content-box;
border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到內邊距框。
content-box 背景被裁剪到內容框。
3 background-attachment 設定背景影象是否固定或者隨著頁面的其餘部分滾動
scroll 預設值。背景影象會隨著頁面其餘部分的滾動而移動。
fixed 當頁面的其餘部分滾動時,背景影象不會移動。
inherit 規定應該從父元素繼承 background-attachment 屬性的設定
以上是對background的屬性瞭解,其中重點是background-position和background-size在一塊寫時的表示方法,以及三個不常用到的屬性的瞭解,具體事例可以下去聯絡的時候好好寫幾個demo看一下效果。
麻鴨,忘了這次總結的重點了,多個背景圖的設定,開始=>action
background: url(…/assets/image1.png) no-repeat 0 center/43px,
url(…/assets/image2.png) no-repeat center right/12px,
#fff;
上面的background包括兩個背景圖imgage1和image2,可以單獨設定每個圖片的重複性(background-repeat) 所處位置(background-position) 圖片的大小(background-size),背景色單獨設定 #fff(background-color)
注意!(這是重點)寫的時候一定要特別注意,每個背景圖的設定之間一定要加‘,’,一定要加‘,’,不然會報錯 (Invalid property value),背景圖和背景色之間也要加‘,’,可以把每個背景圖和這個背景圖的相關設定看做是一個單獨的屬性,每個背景圖和最後設定的背景色是並列的關係。(背景色的設定一定要放到最後,不然也會報錯,記住一定放在後面) background: #fff,url(…/assets/image1.png) no-repeat 0 center/43px,
url(…/assets/image2.png) no-repeat center right/12px; 記住這樣寫會報錯