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;
}

亲自试一试