CSS 設(shè)置背景色

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-18

在CSS中可以為元素設(shè)置背景色以實(shí)現(xiàn)想要的元素樣式，背景色的CSS屬性為background-color。

background-color屬性為元素設(shè)置一種純色。這種顏色會(huì)填充兀素的內(nèi)容、內(nèi)邊距和邊框區(qū)域，擴(kuò)展到元素邊框的外邊界，但不包括外邊距。如果邊框有透明部分（如虛線(xiàn)邊框），就會(huì)透過(guò)這些透明部分顯示出背景色。

盡管在大多數(shù)情況下，沒(méi)有必要使用transparent。不過(guò)，如果不希望某元素?fù)碛斜尘吧瑫r(shí)又不希望用戶(hù)對(duì)瀏覽器的顏色設(shè)置影響到您的設(shè)計(jì)，那么設(shè)置ransparent值還是有必要的。

background-color屬性的值可以是以下幾種：

?color_name：規(guī)定顏色值為顏色名稱(chēng)的背景顏色，如red。

?hex_number：規(guī)定顏色值為十六進(jìn)制值的背景顏色，如#ffOOOO。

?rgb_number：規(guī)定顏色值為RGB代碼的背景顏色，如RGB(255}0,0)。

?transparent:默認(rèn)，背景顏色為透明。

?inherit：規(guī)定應(yīng)該從父元素繼承background-color屬性的設(shè)置。

【例題】使用background-color屬性

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

div{

width: 200px;

height: 200px;

text-align: center;

line-height: 200px;

font-size: 50px;

color:#fff;

}

.d1{

background-color:red;

}

.d2{

background-color: #00ff00;

}

.d3{

background-color: rgb(0,0,255);

}

</style>

</head>

<body>

</body>

</html>

相關(guān)視頻回答

回復(fù)(0)