CSS Color Keywords

本章将解释 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 Colors 章节。

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

تجربة شخصية