CSS 颜色关键字

此页面将解释transparent,currentcolor，和 inherit关键字。

透明关键字

这个transparent关键字用于使颜色透明。这通常用于为元素制作透明背景色。

这里，<div>元素的背景颜色将是完全透明的，并且背景图片将显示出来：

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

div {
background-color: transparent;
}

笔记：这个transparent关键字相当于 rgba(0,0,0,0)。 RGBA 颜色值是带有 Alpha 通道的 RGB 颜色值的扩展 - 它指定颜色的不透明度。阅读我们的更多内容CSS RGB章和我们的CSS 颜色章节。

这个currentcolor关键字就像一个变量，保存元素颜色属性的当前值。

如果您希望特定颜色在元素或页面中保持一致，则此关键字可能很有用。

在此示例中，<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关键字可用于任何 CSS 属性和任何 HTML 元素。

在此示例中，<span> 的边框设置将从父元素继承：

div {
border: 2px solid red;
}

span {
border: inherit;
}