CSS手冊簡編:顏色背景屬性

來源:互聯網
上載者:User
css

CSS屬性:

4、顏色和背景(Color and Background)屬性:

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

color屬性:

color屬性用於設定元素的前景色彩:

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

color屬性的值可以是十六進位數值、rgb()函數或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屬性也可以實現,下面的屬性是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中容許使用



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。