CSS3 颜色关键字

本章节将讲解 CSS3 颜色中的 transparent、currentcolor和inherit关键字。

透明关键字 transparent

transparent 关键字用于使颜色透明。这通常用于为元素生成透明的背景色。

在这里，<div>元素的背景色将是完全透明的，并且背景图像将通过以下方式显示：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("/images/paper.gif");
}
div.ex1 {
  background-color: lightgreen;
  border: 2px solid black;
  padding: 15px;
}
div.ex2 {
  background-color: transparent;
  border: 2px solid black;
  padding: 15px;
}
</style>
</head>
<body>
<h2>透明背景</h2>
<div class="ex1">这个 div 有一个浅绿色的背景。</div>
<br>
<div class="ex2">这个 div 有一个透明背景。</div>
</body>
</html>

运行一下

注意：transparent 关键字等同于 rgba（0,0,0,0）。RGBA 颜色值是带有 alpha 通道的 RGB 颜色值的扩展-指定颜色的不透明度。可以访问本站的 CSS RGB 颜色章节和 CSS 颜色章节中学习更多相关知识。

currentcolor 关键字

currentcolor 关键字类似于保存元素的 color 属性的当前值的变量。

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

在本例中，<div>元素的边框颜色将为蓝色，因为<div>元素的文本颜色为蓝色：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  color: blue;
  border: 10px solid currentcolor;
  padding: 15px;
}
</style>
</head>
<body>
<h2>currentcolor 关键字</h2>
<p>currentcolor 关键字是指元素的 color 属性的当前值。</p>
<div>
这个div元素有一个蓝色的文本颜色和一个蓝色的边框。
</div>
</body>
</html>

运行一下

在本例中，<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>的边框设置将从父元素继承：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 2px solid red;
}
span {
  border: inherit;
}
</style>
</head>
<body>
<h2>inherit 关键字</h2>
<div>这里，<span>span元素的</span> 边框设置将从父元素继承。</div>
<br>
<div style="border:2px dotted blue;">这里，<span>span 元素的</span> 边框设置也将从父元素继承。</div>
</body>
</html>

运行一下

CSS3 颜色关键字

透明关键字 transparent

currentcolor 关键字

inherit 关键字

分类导航