CSS背景颜色继承

Question

我有一个父div和一个子div。

.container {
  width: 300px;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.7)
}

.child {
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.3)
}

<div class="container">
  <div class="child">
  </div>
</div>

子元素背景颜色与rgba(0, 0, 0, 0.3)不同，因为它从父级继承背景颜色。

rgba(0, 0, 0, 1)顶部是否应该将rgba(0, 0, 0, 0.3)的{​​{1}}背景颜色应用于rgba(0, 0, 0, 0.7)？

如果您正在投票，请发表评论，为什么要投票。

JS Fiddle Link

Answer 1

我相信，既然你继承了颜色，你可以在css代码中使用“inherit”，如下所示：

.container {
  width: 300px;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.7)
}

.child container{
  width: 200px;
  height: 200px;
  background-color:inherit
}

<div class="container">
  <div class="child">
  </div>
</div>