在CSS中,使用background-color屬性來定義元素的背景顏色。
語法:
background-color:顏色值;
說明:
顏色值是一個關鍵字或一個16進制的RGB值。關鍵字指的就是顏色的英文名稱,如red、blue、green等。所謂的16進制RGB值指的就是類似“#FBF9D0”這種形式的值。對於顏色值的獲取,大家可以使用 學習網開發的“在線調色板”來獲取,非常的方便。
為了更好地理解background-color屬性取值,大家參考一下“字體顏色color”這一節。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-color屬性</title>
<style type="text/css">
/*設置所有div元素的共同樣式*/
div
{
width:100px;
height:60px;
}
/*設置3個div元素的個別樣式*/
#div1{background-color:red;}
#div2{background-color: #F3DE3F;}
#div3{background-color: #0AF7FB;}
</style>
</head>
<body>
<div id="div1">背景顏色值為red</div>
<div id="div2">背景顏色值為#F3DE3F </div>
<div id="div3">背景顏色值為#0AF7FB </div>
</body>
</html>
在浏覽器預覽效果如下:
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>color和background-color區別</title>
<style type="text/css">
#p1
{
width:290px;
color:white;
background-color:red;
}
</style>
</head>
<body>
<p id="p1">
p元素文本顏色color值為white<br/>
p元素背景顏色background-color值為red
</p>
</body>
</html>
在浏覽器預覽效果如下: