CSS 颜色关键字


目录

    显示目录


本页将对关键词进行解释:

transparent
currentcolor
inherit

透明关键字

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

例子

这里,<div>元素的背景颜色将完全 透明,背景图片会透过:

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

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("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>The transparent Keyword</h2>

<div class="ex1">This div has a light green background.</div>
<br>
<div class="ex2">This div has a transparent background.</div>

</body>
</html>


注意: 透明 关键字相当于 rgba(0,0,0,0)。 RGBA 颜色值是 带有 alpha 通道的 RGB 颜色值 - 指定 a 的不透明度 颜色。阅读我们的 CSS RGB 章节和中的更多内容 我们的 CSS 颜色章节。


当前颜色关键字

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

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

例子

在此示例中,<div> 元素的边框颜色将为蓝色,因为 <div> 元素的文本颜色为蓝色:

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  color: blue;
  border: 10px solid currentcolor;
  padding: 15px;  
}
</style>
</head>
<body>

<h2>The currentcolor Keyword</h2>

<p>The currentcolor keyword refers to the current value of the color property of an element.</p>

<div>
This div element has a blue text color and a blue border.
</div>

</body>
</html>


例子

在此示例中,<div> 的背景颜色设置为当前颜色 body 元素的值:

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

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: purple;
}

div {
  background-color: currentcolor;
  padding: 15px;
}

div p {
  color: white;
}
</style>
</head>
<body>

<h2>The currentcolor Keyword</h2>

<p>This is some text in the body part...</p>

<div>
<p>This div's background color is set to the current color value of the body element.</p>
</div>

</body>
</html>


例子

在此示例中,<div> 的边框颜色和阴影颜色设置为 body 元素的当前颜色值:

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: green;
}

div { 
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
  padding: 15px;
}
</style>
</head>
<body>

<h2>The currentcolor Keyword</h2>

<p>This is some text in the body part...</p>

<div>
<p>This div's border color and shadow color is set to the current color value of the body element.</p>
</div>

</body>
</html>



继承关键字

inherit 关键字指定 属性应该从其父元素继承其值。

inherit 关键字可用于任何 CSS 属性,以及任何 HTML 元素。

例子

在此示例中,<span> 的边框设置将继承自 父元素:

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 2px solid red;
}

span {
  border: inherit;
}
</style>
</head>
<body>

<h2>The inherit Keyword</h2>

<div>Here, the <span>span element's</span> border settings will be inherited from the parent element.</div>
<br>

<div style="border:2px dotted blue;">Here, the <span>span element's</span> border settings will also be inherited from the parent element.</div>

</body>
</html>