CSS 顏色關鍵字

本章將解釋 transparent、currentcolor 和 inherit 關鍵字。

transparent 關鍵字

transparent 關鍵字用于使顏色透明。這通常用于為元素設置透明的背景顏色。

實例

在這里，<div> 元素的背景顏色將完全透明，背景圖像將顯示出來：

body {
  background-image: url("paper.gif");
}
div {
  background-color: transparent;
}

親自試一試

注意：transparent 關鍵字等同于 rgba(0,0,0,0)。RGBA 顏色值是 RGB 顏色值的擴展，帶有 alpha 通道——它指定顏色的不透明度。更多信息請參閱我們的 CSS RGB 章節和 CSS 顏色 章節。

currentcolor 關鍵字

currentcolor 關鍵字類似于一個變量，它保存元素 color 屬性的當前值。

如果你希望某個特定顏色在元素或頁面中保持一致，這個關鍵字會很有用。

實例

在這個例子中，<div> 元素的邊框顏色將為藍色，因為 <div> 元素的文本顏色為藍色：

div {
  color: blue;
  border: 10px solid currentcolor;
}

親自試一試

實例

在這個例子中，<div> 的背景顏色設置為 body 元素的當前顏色值：

body {
  color: purple;
}
div {
  background-color: currentcolor;
}

親自試一試

實例

在這個例子中，<div> 的邊框顏色和陰影顏色設置為 body 元素的當前顏色值：

body {
 color: green;
}
div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

親自試一試

inherit 關鍵字

inherit 關鍵字指定屬性應從其父元素繼承其值。

inherit 關鍵字可用于任何 CSS 屬性，并且可用于任何 HTML 元素。

實例

在這個例子中，<span> 的邊框設置將從父元素繼承：

div {
  border: 2px solid red;
}
span {
  border: inherit;
}

親自試一試