試一試
background-color: brown;
background-color: #74992e;
background-color: rgb(255 255 128);
background-color: rgb(255 255 128 / 0.5);
background-color: hsl(50 33% 25%);
background-color: hsl(50 33% 25% / 0.75);
<section id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
min-width: 100%;
min-height: 100%;
padding: 10%;
}
語法
css
/* Keyword values */
background-color: red;
background-color: indigo;
/* Hexadecimal value */
background-color: #bbff00; /* Fully opaque */
background-color: #bf0; /* Fully opaque shorthand */
background-color: #11ffee00; /* Fully transparent */
background-color: #1fe0; /* Fully transparent shorthand */
background-color: #11ffeeff; /* Fully opaque */
background-color: #1fef; /* Fully opaque shorthand */
/* RGB value */
background-color: rgb(255 255 128); /* Fully opaque */
background-color: rgb(117 190 218 / 50%); /* 50% transparent */
/* HSL value */
background-color: hsl(50 33% 25%); /* Fully opaque */
background-color: hsl(50 33% 25% / 75%); /* 75% opaque, i.e. 25% transparent */
/* Special keyword values */
background-color: currentColor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: revert-layer;
background-color: unset;
background-color 屬性被指定為單個 <color> 值。
值
<color>-
背景的統一顏色。它呈現在任何指定的
background-image後面，儘管顏色仍會透過影像的任何透明部分可見。
無障礙
重要的是，要確保背景顏色與放置在其上的文字顏色之間的對比度足夠高，以便有低視力障礙的人能夠閱讀頁面內容。
顏色對比度是透過比較文字和背景顏色值的亮度來確定的。為了滿足當前的 Web 內容可訪問性指南 (WCAG)，文字內容需要 4.5:1 的比率，對於標題等較大文字需要 3:1 的比率。大文字定義為 18.66 畫素及更粗的 粗體，或 24 畫素及更大。
正式定義
| 初始值 | transparent |
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 否 |
| 計算值 | computed color |
| 動畫型別 | 一種顏色 |
正式語法
background-color =
<color>
示例
給方框上色
此示例演示瞭如何使用不同的 CSS <color> 值將 background-color 應用於 HTML <div> 元素。
HTML
html
<div class="example-one">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="example-two">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="example-three">Lorem ipsum dolor sit amet, consectetuer</div>
CSS
css
.example-one {
background-color: transparent;
}
.example-two {
background-color: rgb(153 102 153);
color: rgb(255 255 204);
}
.example-three {
background-color: #777799;
color: white;
}
結果
給表格上色
此示例演示了在 HTML <table> 元素（包括 <tr> 行和 <td> 單元格）上使用 background-color。
HTML
html
<table>
<tr id="r1">
<td id="c11">11</td>
<td id="c12">12</td>
<td id="c13">13</td>
</tr>
<tr id="r2">
<td id="c21">21</td>
<td id="c22">22</td>
<td id="c23">23</td>
</tr>
<tr id="r3">
<td id="c31">31</td>
<td id="c32">32</td>
<td id="c33">33</td>
</tr>
</table>
CSS
css
table {
border-collapse: collapse;
border: solid black 1px;
width: 250px;
height: 150px;
}
td {
border: solid 1px black;
}
#r1 {
background-color: lightblue;
}
#c12 {
background-color: cyan;
}
#r2 {
background-color: grey;
}
#r3 {
background-color: olive;
}
結果
規範
| 規範 |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-color |
瀏覽器相容性
載入中…