CSS background-color

CSS background-color

CSS background-color是屬性設定元素的背景顏色。

基本介紹

  • 中文名:CSS背景色
  • 外文名:CSS background-color
定義和用法,瀏覽器支持,可能的值,屬性區別,TIY實例,

定義和用法

background-color 屬性設定元素的背景顏色。
background-color 屬性為元素設定一種純色。這種顏色會填充元素的內容、內邊距和框線區域,擴展到元素框線的外邊界(但不包括外邊距)。如果框線有透明部分(如虛線框線),會透過這些透明部分顯示出背景色。
transparent 值
儘管在大多數情況下,沒有必要使用 transparent。不過如果您不希望某元素擁有背景色,同時又不希望用戶對瀏覽器的顏色設定影響到您的設計,那么設定 transparent 值還是有必要的。
默認值:
transparent
繼承性:
no
版本:
CSS1
JavaScript 語法:
object.style.backgroundColor="#00FF00"

body {background-color:yellow;}h1 {background-color:#00ff00;}p {background-color:rgb(255,0,255);}

瀏覽器支持

所有瀏覽器都支持 background-color 屬性。
注釋:任何版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。

可能的值

描述
color_name
規定顏色值為顏色名稱的背景顏色(比如 red)。
hex_number
規定顏色值為十六進制值的背景顏色(比如 #ff0000)。
rgb_number
規定顏色值為 rgb 代碼的背景顏色(比如 rgb(255,0,0))。
默認。背景顏色為透明。
inherit
規定應該從父元素繼承 background-color 屬性的設定。

屬性區別

background-color和color屬性區別
新手朋友們很容易把background-color屬性和color屬性搞混,其實這兩者是非常容易區分的,background-color定義的是背景顏色,而color定義的是文本顏色,顧名思義即可。
舉例:
<head>    <style type="text/css">    #p1    {        width:143px;        height:220px;        color:white;        background-color:red;     }    </style></head><body>    <p id="p1">        p元素文本顏色color值為white<br/>        p元素背景顏色background-color值為red    </p></body></html>

TIY實例

設定背景顏色
本例演示如何為元素設定背景顏色。
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<p>這是段落</p>
<p class="no2">這個段落設定了內邊距。</p>
</body>
</html>

相關詞條

熱門詞條

聯絡我們