顏色 語法: color: <顏色>

初始值: 由瀏覽器決定

適用于: 所有對象

向下兼容: 是

顏色屬性允許網頁制作者指定一個元素的顏色。查看單位可以知道顏色值的描述. 一些顏色規則的例子包括:

H1 { color: blue } H2 { color: #000080 } H3 { color: #0c0 } 為了避免與用戶的樣式表之間的沖突，背景和顏色屬性應該始終一起指定。

背景顏色 語法: background-color: <值>

允許值: <顏色> | transparent (透明)

初始值: transparent (透明)

適用于: 所有對象

向下兼容: 否

背景顏色屬性設定一個元素的背景顏色。例如:

BODY { background-color: white } H1 { background-color: #000080 } 為了避免與用戶的樣式表之間的沖突，無論任何背景顏色被使用的時候，背景圖象都應該被指定。而大多數情況下，background-image: none都是合適的。

網頁制作者也可以使用略寫的背景屬性，通常會比背景顏色屬性獲得更好的支持。

背景圖象 語法: background-image: <值>

允許值: <統一資源定位URLs> | none (無)

初始值: none (無)

適用于: 所有對象

向下兼容: 否

背景圖象屬性設定一個元素的背景圖象。例如:

BODY { background-image: url(/images/foo.gif) } P { background-image: url(http://www.js-pz168.com/bg.png) } 為了那些不載入圖象的瀏覽者，當定義了背景圖象后，應該也要定義一個類似的背景顏色。

網頁制作者也可以使用略寫的背景屬性，通常會比背景圖象屬性獲得更好的支持。

背景重復 語法: background-repeat: <值>

允許值: repeat | repeat-x | repeat-y | no-repeat

初始值: repeat

適用于: 所有對象

向下兼容: 否

背景重復屬性決定一個指定的背景圖象如何被重復。值為repeat-x時，圖象橫向重復，當值為repeat-y時圖象縱向重復。例如:

BODY { background: white url(candybar.gif); background-repeat: repeat-x } 在以上例子中, 圖象只會被橫向平鋪。

網頁制作者也可以使用略寫的背景屬性，通常會比背景重復屬性獲得更好的支持。

背景附件 語法: background-attachment: <值>

允許值: scroll | fixed

初始值: scroll

適用于: 所有對象

向下兼容: 否

背景附件屬性決定指定的背景圖象是跟隨內容滾動，還是被看作油畫固定不動。例如，以下指定一個固定的背景圖象:

BODY { background: white url(candybar.gif); background-attachment: fixed } 網頁制作者也可以使用略寫的背景屬性，通常會比背景附件屬性獲得更好的支持。

背景位置 語法: background-position: <值>

允許值: [<百分比> | <長度>]{1,2} | [top | center | bottom] || [left | center | right]

初始值: 0% 0%

適用于: 塊級及替換元素

向下兼容: 否

圖象位置屬性給出指定背景圖象的最初位置。這個屬性只能應用于塊級元素和替換元素。(替換元素僅指一些已知原有尺寸的元素。HTML替換元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT。)

安排背景位置最容易的方法是使用關鍵字:

橫向的關鍵字 (left, center, right) 縱向的關鍵字 (top, center, bottom) 百分比和長度也可用作安排背景圖象的位置。百分比和元素字體大小有關。雖然使用長度是允許的，但因為它們處理不同的顯示分辨率有不可避免的缺點，所以不被推薦。

當使用百分比或長度時，需首先指定橫向位置，接著是縱向位置。一個值，例如20% 65%，指定圖象的左起20%上起65%的那點會被放在元素的左起20%上起65%的那點的所在位置。一個值如5px 10px，指定圖象的左上角會被放在元素的左起5像素上起10像素的位置。

如果僅給出橫向的值，縱向位置的值為50%。長度和百分比的組合是允許的，負值也行。例如，10% -2cm是允許的。雖然，百分比和長度是不能夠和關鍵字組合。

關鍵字解釋如下:

top left = left top = 0% 0% top = top center = center top = 50% 0% right top = top right = 100% 0% left = left center = center left = 0% 50% center = center center = 50% 50% right = right center = center right = 100% 50% bottom left = left bottom = 0% 100% bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100% 如果背景圖象被看作油畫般固定不動，關于油畫的圖象會代替元素被放置。

網頁制作者也可以使用略寫的背景屬性，通常會比背景位置屬性獲得更好的支持。

背景 語法: background: <值>

允許值: <背景顏色> || <背景圖象> || <背景重復> || <背景附件> || <背景位置>

初始值: 未定義

適用于: 所有對象

向下兼容: 否

背景屬性是一個更明確的背景—關系屬性的略寫。以下是一些背景的聲明:

BODY { background: white url(http://www.js-pz168.com/foo.gif) } BLOCKQUOTE { background: #7fffd4 } P { background: url(../backgrounds/pawn.png) #f0f8ff fixed } TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right } 當一個值未被指定時，將接受其初始值。例如，在上述的前三條規則，背景位置屬性將被設置為0% 0%。

為了避免與用戶的樣式表之間的沖突，背景和顏色應該一起被指定。

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

分享名稱：CSS顏色及背景屬性
標題路徑：http://www.js-pz168.com/news22/313672.html

成都網站建設公司_創新互聯，為您提供軟件開發、手機網站建設、微信小程序、定制開發、網站內鏈、品牌網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯