CSS屬性：

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

這里介紹有關(guān)CSS中前景色和背景顏色、圖片的設(shè)定方法。

color屬性：

color屬性用于設(shè)定元素的前景色：

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

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

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

背景屬性：

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

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

backgroud-image屬性用于設(shè)定背景的圖片：

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

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

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

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

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

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

例如：

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

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

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

屬性名稱: 'background-position' 屬性值: [<percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right] 初始值: 0% 0% 適合對(duì)象: 容器元素 是否繼承: 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'> 適合對(duì)象: 所有元素 是否繼承: no 百分比備注: 只在background-position中容許使用

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

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

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

廣告

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