css3背景 邊框 和補丁相關屬性 (二)

2022-08-13 09:36:14 字數 4583 閱讀 8610

背景

background : background-color || background-image || background-repeat || background-attachment || background-position 預設值為:transparent none repeat scroll 0% 0%。

設定物件的背景樣式。如使用該復合屬性定義其單個引數,則其他引數的預設值將無條件覆蓋各自對應的單個屬性設定。例如:

設定 background : white 等於設定 background : white none repeat scroll 0% 0% 。如果在此之前設定了 background-image 屬性,則其設定將被 background-image 的預設值 none 覆蓋。背景樣式屬性的作用區域為物件的內容區域與內補丁( padding )區域。不包括邊框( border )與外補丁( margin )區域。儘管該屬性不可繼承,但如果未指定,其父物件的背景顏色和背景圖將在物件下面顯示。對應的指令碼特性為 background 。

background-attachment : scroll | fixed 語法取值

scroll  :  預設值。背景影象是隨物件內容滾動

fixed   :  背景影象固定

background-color : transparent | color 語法取值 transparent  :  預設值。背景色透明

color        :  指定顏色。請參閱 顏色單位 和 附錄:顏色表  使用說明 設定或檢索物件的背景顏色。當背景顏色與背景影象( background-image )都被設定了時,背景將覆蓋於背景顏色之上。

background-image : none | url ( url ) 語法取值 none         :  預設值。無背景圖 url ( url )  :  使用絕對或相對 url 位址指定背景影象 使用說明 設定或檢索物件的背景影象。當背景影象與背景顏色( background-color )都被設定了時,背景將覆蓋於背景顏色之上。

background-position : length || length background-position : position || position 語法取值 length    :  百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱 長度單位  position  :  top | center | bottom | left | center | right 使用說明 設定或檢索物件的背景影象位置。必須先指定 background-image 屬性。該屬性定位不受物件的補丁屬性( padding )設定影響。預設值為: 0% 0% 。此時背景將被定位於物件不包括補丁( padding )的內容區域的左上角。如果只指定了乙個值,該值將用於橫座標。縱座標將預設為 50% 。如果指定了兩個值,第二個值將用於縱座標。如果設定值為 right center ,因為 right 作為橫座標值將會覆蓋 center 值,所以背景將被居右定位。對應的指令碼特性為 backgroundposition 。

background-position-x : length | left | center | right 語法取值 length  :  百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱 長度單位  left    :  居左 center  :  居中 right   :  居右 使用說明 設定或檢索物件的背景影象橫座標位置。必須先指定 background-image 屬性。該屬性定位不受物件的補丁屬性( padding )設定影響。預設值為: 0% 。此屬性對於 currentstyle 物件而言是唯讀的。對於其他物件而言是可讀寫的。對應的指令碼特性為 backgroundpositionx 。

background-position-y : length | top | center | bottom 語法取值 length  :  百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱 長度單位  top     :  居頂 center  :  居中 bottom  :  居底  使用說明 設定或檢索物件的背景影象縱座標位置。必須先指定 background-image 屬性。該屬性定位不受物件的補丁屬性( padding )設定影響。預設值為: 0% 。此屬性對於 currentstyle 物件而言是唯讀的。對於其他物件而言是可讀寫的。對應的指令碼特性為 backgroundpositiony 。

background-repeat : repeat | no-repeat | repeat-x | repeat-y 語法取值 repeat     :  預設值。背景影象在縱向和橫向上平鋪 no-repeat  :  背景影象不平鋪 repeat-x   :  背景影象僅在橫向上平鋪 repeat-y   :  背景影象僅在縱向上平鋪 使用說明 設定或檢索物件的背景影象是否及如何鋪排。必須先指定物件的背景影象( background-image )。

layer-background-color : transparent | color 語法取值 transparent  :  預設值。背景色透明。 color        :  指定顏色。請參閱 顏色單位 和 附錄:顏色表。 使用說明 設定或檢索物件整個區域的背景顏色。 css3新增: background-origin : border | padding | content 相關屬性: background-clip | background-size 取值:border: 從border區域開始顯示背景。 padding: 從padding區域開始顯示背景。 content: 從content區域開始顯示背景。

background-clip : border-box | padding-box | content-box | no-clip 相關屬性: background-origin | background-size 取值:border-box: 從border區域向外裁剪背景。 padding-box: 從padding區域向外裁剪背景。 content-box: 從content區域向外裁剪背景。 no-clip: 從border區域向外裁剪背景。

background-size :[ | | auto ] | cover | contain

取值:: 由浮點數字和單位識別符號組成的長度值。不可為負值。

指定背景大小,以象素或百分比顯示。當指定為百分比時,大小會由所在區域的寬度、高度,以及background-origin的位置決定。還可以通過cover和contain來對進行伸縮。

multiple backgrounds

語法:background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

相關屬性: background-image | background-origin | background-clip | background-repeat | background-size | background-position

取值:: 指定或檢索物件的背景影象。

: 指定背景的顯示區域。參見background-origin

: 指定背景的裁剪區域。參見background-clip

: 設定或檢索物件的背景影象是否及如何重複鋪排。

: 設定或檢索物件的背景影象位置。 說明:多重背景圖象,可以把不同背景圖象只放到乙個塊元素裡。 多個url之間使用逗號隔開即可;如果有多個背景,而其他屬性只有乙個(例如background-repeat只有乙個),表明所有背景應用該屬性值。 css3中在容器的多層背景,各子屬性與逗號來分隔值,如果指定的值,如下:

background-image: w1, w2, w3,…, wm background-repeat: x1, x2, x3,…, xr background-size: y1, y2, y3,…, ys background-position: s1, s2, s3,…, sp 當背景層的數值是n = max(m,r, s, p) 每個屬性可以假如它的值為n,通過重複指定的值如下所示:

background-image: w1,…wm, w1,…wm, w1,… /* n values */ background-repeat: x1,…xr, x1,…xr, x1,… /* n values */ background-size: y1,…ys, y1,…ys, y1,… /* n values */ background-position: s1,…rp, s1,…rp, s1,… /* n values */

範例書寫:

background-image: url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png); background-position: left top, -320px bottom, -640px top; background-repeat: no-repeat, no-repeat, repeat-y;

也可以簡寫:

background: url(img/multiple-backgrounds.png) left top no-repeat, url(img/multiple-backgrounds.png) -320px bottom no-repeat, url(img/multiple-backgrounds.png) -640px top repeat-y;

css3背景 邊框 和補丁相關屬性

border 基本語法 border border width border style border color 預設值為 medium none border color 的預設值將採用文字顏色 border top,border left,border right,border bottom ...

CSS3 邊框和背景

下述內容主要講述了 html5權威指南 第19章關於 使用邊框和背景 css3中邊框和樣式得到了增強。例如 可以建立圓角邊框,使用影象邊框,為元素建立陰影。表 基本邊框屬性屬性 說明值border width 設定邊框的寬度 長度值 百分數 thin medium thick border styl...

css3 背景和邊框

設定背景和邊框 設定背景顏色 background color blanchedalmond background color rgb 100,200 255 background color f4f4f4 邊框設定 具體到屬性 border width 1px 設定邊框寬度 border colo...