CSS：将颜色设置为父元素的背景颜色

Question

CSS：将颜色设置为父元素的背景颜色

7

从下面的图片可以看出：

我该怎样使白色框内的文本和图标与大框背景颜色相同？

以下是该标记的代码：

<div class="class-item blue-bg">
  <!--Heading stuff-->
  <div class="class-item-actions">
    <span class="pick-up-icon">
      <i class="fa fa-female fa-lg"></i>
      <i class="fa fa-child"></i>
    </span>
    <span class="full-day-icon blue">AM / PM</span>
    <span class="unapproved-projects-icon blue">
     2&nbsp;<i class="fa fa-th-large fa-lg fa-fw class-item-action"></i>
    </span>
    <i class="fa fa-unlock fa-lg></i>
  </div>
</div>

那么，我应该如何做才能让“full-day-icon”和“unapproved-projects-icon”不需要添加“blue”类，而是从“class-item”的“background-color”继承蓝色呢？

编辑：以下是相关的CSS

  .class-item {
    padding: 10px;
    width: 90%;
    color: white;
    margin-bottom: 5px;
    cursor: pointer;
    opacity: 0.85;
  }

  .full-day-icon {
    font-weight: bold;
    background: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

  .unapproved-projects-icon {
    background-color: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

- Robert

目前还没有使用“父级”选择器的方法。因此，您可能需要通过CSS将这两个类都设置为相同的颜色。 - demogorgon

请问您能否提供您的CSS样式表呢？ - Mindless

@Mindless 我添加了相关的CSS。 - Robert

如果您不担心与Internet Explorer的兼容性问题，那么CSS变量可能是值得考虑使用的东西。https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables - Khauri

2个回答

0

CSS 中无法继承不同的属性。因此，子 div 无法继承其父元素的 background-color 属性作为其 color 属性。

.parent {
  background-color: red;
}
.child {
  color: inherit-background-color /* Not a way to do this without a preprocessor */
}

为什么不直接应用样式呢？

  .full-day-icon {
    color: #0076A5;
  }

.class-item {
    padding: 10px;
    width: 90%;
    background-color: #0076A5;
    color: white;
    margin-bottom: 5px;
    cursor: pointer;
    opacity: 0.85;
  }

  .full-day-icon {
    font-weight: bold;
    background: white;
    color: #0076A5;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

  .unapproved-projects-icon {
    background-color: white;
    color: #0076A5;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

<div class="class-item blue-bg">
  <!--Heading stuff-->
  <div class="class-item-actions">
    <span class="pick-up-icon">
      <i class="fa fa-female fa-lg"></i>
      <i class="fa fa-child"></i>
    </span>
    <span class="full-day-icon blue">AM / PM</span>
    <span class="unapproved-projects-icon blue">
     2&nbsp;<i class="fa fa-th-large fa-lg fa-fw class-item-action"></i>
    </span>
    <i class="fa fa-unlock fa-lg></i>
  </div>
</div>

- basement

4

我不想直接应用样式，因为颜色是动态的， #0076A5 只是默认值。无论如何，感谢您的回答。我查找了一下，并希望有一些关于 currentColor 或 transparency 的魔法可以做或者其他什么的。谢谢！ - Robert

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sangeeth96 · Accepted Answer

如果您可以使用CSS变量，这里有一种简洁明了的方法来实现此功能：

  .class-item {
    /** Specify the BG color in one place. **/
    --class-item-bg: #0076A5;
    padding: 10px;
    width: 90%;
    background-color: var(--class-item-bg);
    color: white;
    margin-bottom: 5px;
    cursor: pointer;
    opacity: 0.85;
  }

  .full-day-icon {
    font-weight: bold;
    background: white;
    color: var(--class-item-bg);
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

  .unapproved-projects-icon {
    background-color: white;
    color: var(--class-item-bg);
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    position: relative;
    top: -1px;
  }

你可以查看这个片段，了解如何使用JavaScript更改属性，以便它影响使用该属性的所有CSS规则。