如何在 CSS 变量中存储继承值？

在 CSS 变量中存储继承值

在 CSS 中，我们经常会遇到根据继承值操作属性的需求，比如继承元素的背景色为其伪元素。但是，在 CSS 变量中使用继承关键字并不总是能按预期工作。

问题

考虑这个简化的示例：

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  /* Properties... */
}

.box:before {
  background: var(--color);
  /* Other properties... */
}

在这种情况下，我们向 .box 元素添加一个伪元素 (::before) 并将其背景属性设置为使用 --color CSS 变量。但是，如果我们希望伪元素使用inherit关键字继承.box的背景颜色，它将无法按预期工作。

解决方案

将继承的值存储在CSS 变量，我们可以使用属性的后备值。回退值被指定为 var() 函数的第二个参数。例如：

background: var(--color, inherit);

通过这样做，我们告诉背景属性在未定义 --color 变量的情况下使用继承作为后备值。

但是，在我们的例子中，这是行不通的，因为 --color 总是在 :root 级别定义。为了解决这个问题，我们可以使用初始值来取消定义我们的自定义属性，并强制使用回退值：

.box:before {
  background: var(--color, inherit);
  /* Other properties... */
}

/* Undefine --color using the initial value */
.box:before {
  --color: initial;
}

初始值将 CSS 变量设置为其初始值，该值是一个空值价值。当 CSS 变量具有初始值时，var() 会将其视为具有后备值。

通过使用这种方法，我们可以将继承的值存储在 --color CSS 变量中，并将其有效地用于伪元素的背景属性。

以上是如何在 CSS 变量中存储继承值？的详细内容。更多信息请关注PHP中文网其他相关文章！