css3 background屬性調整增強介紹

2022-09-25 13:03:08 字數 2590 閱讀 9272

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

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

1、多個背景

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

2、新屬性:background clip

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

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

(2)backgr程式設計客棧ound-clip: padding;背景在padding下開始顯示,而不是border邊框下開始

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

(4)backg程式設計客棧round-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-boxwww.cppcns.com內容區域位置算起;

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

4、新屬性:background  size

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

(1)background-size: contain;

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

(2)background-size: cover;

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

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

標明背景縮放的尺寸大小

(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 的調整

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

中文原文:css3.0對background的調整與增強

英文原文:backgrounds in css3

本文標題: css3 background屬性調整增強介紹

本文位址:

CSS3 background新增屬性用法

1.background屬性列表 background color background position background size background repeat background origin background clip background attachment backgr...

CSS3background中屬性值介紹

background size 語法 background size auto cover contain 取值 auto 背景影象的真實大小,預設值 用長度值指定背景影象大小 用百分比指定背景影象大小 cover 將背景影象等比縮放到完全覆蓋容器,背景影象有可能超出容器 contain 將背景影象...

CSS3中關於background一些屬性及連寫

background image 它允許為背景新增乙個或者乙個漸變顏色 這裡注意漸變色屬於image 而不是color 下面我們寫乙個漸變色的div看看實際用法 main 關於image的用法很簡單 主要講解一下漸變中的引數 第乙個為角度 與我們數學中的x y 軸方向相同 0度則為y軸正方向所以漸變...