在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>
在浏覽器預覽效果如下: