CSS屬性：

4、顏色和背景（Color and Background）屬性：

這里介紹有關CSS中前景色和背景顏色、圖片的設定方法。

color屬性：

color屬性用于設定元素的前景色：

屬性名稱: 'color' 屬性值: <color> 初始值: 根據(jù)用戶的初始值而定 適合對象: 所有元素 是否繼承: yes 百分比備注: 被禁止

color屬性的值可以是十六進制數(shù)值、rgb()函數(shù)或CSS承認的顏色名稱。如：

EM { color: red } EM { color: rgb(255,0,0) }

背景屬性：

background-color屬性用于設定背景色，初始值為透明：

屬性名稱: 'background-color' 屬性值: <color> | transparent 初始值: transparent 適合對象: 所有元素 是否繼承: no 百分比備注: 被禁止

backgroud-image屬性用于設定背景的圖片：

屬性名稱: 'background-image' 屬性值: <url> | none 初始值: none 適合對象: 所有元素 是否繼承: no 百分比備注: 被禁止

其中url可以為絕對地址，也可以是相對地址，例如：

BODY { background-image: url(marble.gif) } P { background-image: none }

以上兩個屬性利用普通的HTML屬性也可以實現(xiàn)，下面的屬性是CSS對原有HTML的擴展。 background-repeat屬性用來描述背景圖片的重復排列方式：

屬性名稱: 'background-repeat' 屬性值: repeat | repeat-x | repeat-y | no-repeat 初始值: repeat 適合對象: 所有元素 是否繼承: no 百分比備注: 被禁止

其中屬性值的含義為： repeat：沿X軸和Y軸兩個方向重復顯示圖片。 repeat-x：沿X軸方向重復圖片。 repeat-y：沿Y軸方向重復圖片。 none：不重復圖片。

例如：

BODY { background: red url(pendant.gif); background-repeat: repeat-y; } /*表示沿Y軸重復圖片"pendant.gif"，其余部分以紅色為背景色*/

background-attachment屬性表示在滾動整個文檔時，背景圖片的顯示方式。它的屬性值有兩種：fixed和scroll，fixed相當于IE4里的水印效果，也就是說在拖動文檔時，背景相對是靜止的，scroll則和文檔一起滾動。

background-position屬性用來指定背景圖片顯示的位置：

屬性名稱: 'background-position' 屬性值: [<percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right] 初始值: 0% 0% 適合對象: 容器元素 是否繼承: no 百分比備注: refer to the size of the element itself

其中屬性值含義為： "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%"。 例如：

BODY { background: url(banner.jpeg) right top } /* 100% 0% */ BODY { background: url(banner.jpeg) top center } /* 50% 0% */ BODY { background: url(banner.jpeg) center } /* 50% 50% */ BODY { background: url(banner.jpeg) bottom } /* 50% 100% */

background屬性是以上背景屬性的快捷方式，屬性和順序如下：

屬性名稱: 'background' 屬性值: <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'> 適合對象: 所有元素 是否繼承: no 百分比備注: 只在background-position中容許使用

本文來源于成都網站建設公司與成都網站設計制作公司-創(chuàng)新互聯(lián)成都公司！

分享文章：顏色背景屬性
本文路徑：http://aaarwkj.com/news30/323380.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網站策劃、商城網站、網站建設、軟件開發(fā)、外貿網站建設

廣告

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