css3對background的調整與增強

2022-08-24 17:09:09 字數 2582 閱讀 7195

css

3對於backgrounds做了一些修改,最明顯的乙個就是採用設定多背景,不但新增了4個新屬性,並且還對目前的屬性進行了調整增強。

1、多個背景

在css3裡面,你可以再乙個標籤元素裡應用多個背景。**類似與css2.0版本的寫法,但引用之間需用「,」逗號隔開。第乙個是定位在元素最上面的背景,後面的背景依次在它下面顯示,如下:

2、新屬性:background clip

此討論讓我們回到文章開始提到的關於背景被border邊框遮擋的問題。background-clip的新增讓我們完全能夠控制背景顯示的位置。屬性值如下:

(1)background-clip: border;背景在border邊框下開始顯示

(2)background-clip: padding;背景在padding下開始顯示,而不是border邊框下開始

(3)background-clip: content;背景在內容區域下開始顯示,而不是border邊框下開始或padding下開始。

(4)background-clip: no-clip;預設屬性值,類似與background-clip: border;

3、新屬性: background origin

此屬性需要與background-position配合使用。你可以用background-position計算定位是從border,padding或content boxes內容區域算起。(類似background-clip)

(1)background-origin:border;

從border邊框位置算起

(2)background-origin:padding;

從padding位置算起

(3)background-origin:content;

從content-box內容區域位置算起;

background-clip和background-origin的不同之處www.css3.info**給做了很好的分析講解。

4、新屬性:background  size

background size屬性用來重設你的背景。有幾個屬性值:

(1)background-size: contain;

縮小背景使其適應標籤元素(主要是畫素方面的比率)

(2)background-size: cover;

讓背景放大延伸到整個標籤元素大小(主要是畫素方面的比率)

(3)background-size: 100px 100px;

標明背景縮放的尺寸大小

(4)background-size: 50% 100%;

百分比是根據內容標籤元素大小,來縮放的尺寸大小

你可以去css 3 specifications 站點看一下簡單的案例說明。

5、新屬性:background break

css3裡標籤元素能被分在不同區域(如:讓內聯元素span跨多行),background-break屬性能夠控制背景在不同區域顯示。

屬性值:

(1)background-break: continuous;

此屬性是預設值,忽視區域之間的間隔空隙(給它們應用就好像把它們看成乙個區域一樣)

(2)background-break: bounding-box;

重新考慮區域之間的間隔

(3)background-break: each-box;

對每乙個獨立的標籤區域進行背景的重新劃分。

6、背景顏色的調整

background-color屬性在css3版本裡面稍微做了增強,除了指定background color背景顏色之外,還可以對不使用的標籤元素背景進行去色處理。

background-color: green / blue;此例子裡,這背景顏色可能是綠色,然而,如果底部背景無效的話,藍色將代替綠色來顯示。如果你沒有指定某個顏色的話,它將其視為透明。

7、背景重複的調整

css2裡當設定背景的時候,它經常被標籤元素擷取而顯示不全,css3介紹了2個新屬性來修復此問題。

space:以相同的間距平鋪且填充整個標籤元素

round:自動縮放直到適應且填充整個標籤元素

css 3 specifications**對background-repeat: space的使用就是乙個現成的例子。

8、background attachment 的調整

background attachment有了乙個新屬性值:local,當標籤元素滾動時它才有效(如設定overflow:scroll;),當background-attachment設定為scroll時,背景是不隨內容滾條滾動的。現在,有了background-attachment:local,就可以做到讓背景隨元素內容滾動而滾動了。

(注:僅對css3對background的調整、增加的屬性進行了翻譯

CSS3 背景 background 屬性

background color 顏色值 預設的值是 transparent 透明色 background image none url url 引數 作用none 無背景圖 預設的 url使用絕對或相對位址指定背景影象 background repe repeat no repeat repeat...

background的css3新屬性

屬性值 border box繪製邊框以內的區域 padding box 繪製內邊距以內的區域 centent box 僅繪製內容區域 屬性值 border box 從border的左上角開始定位 padding box 從padding的左上角開始定位 content box 從內容區的左上角開始定...

巧用CSS3之background漸變

常見斑馬loading 上圖是我們常見的loading進度條,以前都是用一張背景平鋪的。其實如果拋去相容性因素,我們可以用零純樣式來實現。一,首先,我們先為容器定義乙個純藍色背景 box這樣就形成了四等分的條紋,但這顯然不是我們想要的結果。三,設定傾斜角度。linear gradient是可以設定傾...