如何避免 CSS 继承以保持线性渐变背景颜色不变？

Question

如何避免 CSS 继承以保持线性渐变背景颜色不变？基本上我想避免从“框”（class 名称）div 到 .box-child div 给背景颜色红色。我希望 .box-child 将初始背景颜色设置为 .main-box div。

通常我会将背景颜色设置回原来的颜色，但它是线性渐变背景，如果我将它设置回一个小区域，它看起来就不像应该的样子。我想保持原样。

.main-box {
  color: white;
  height: 500px;
  background: linear-gradient( 180deg, rgba(2, 0, 36, 1) 0%, rgba(84, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

.box {
  height: 300px;
  background: red;
}

.box-child {
  height: 150px;
  inherits: none;
}

<div class="main-box">
  MAIN BOX
  <div class="box">
    BOX
    <div class="box-child">
      BOX CHILD
    </div>
  </div>
</div>

Answer 1

据我了解，目的是为 box-child 元素提供与 main 相同的背景 - 即为其提供它所处的那一点 main 的背景。

如果我们给 box-child 一个位于其后面但具有与 main 相同的尺寸、位置和背景的伪元素，然后向 box-child 添加一个 clip-path 以剪掉那些部分，就可以做到这一点不在其中的伪元素。

/* give the box-child before pseudo element the same dimensions and same background as main */
.main-box, .box-child::before {
  height: 500px;
  background: linear-gradient(
    180deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(84, 9, 121, 1) 35%,
    rgba(0, 212, 255, 1) 100%
  );
}

.main-box {
  color: white;
  position: relative;
}

.box {
  height: 300px;
  background: red;
}

.box-child {
  height: 150px;
  clip-path: inset(0);
}

.box-child::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

  <div class="main-box">
    MAIN BOX
    <div class="box">
      BOX
      <div class="box-child">
        BOX CHILD
      </div>
    </div>
  </div>

如何避免 CSS 继承以保持线性渐变背景颜色不变？

How to avoid CSS inheritance to keep linear gradient background color intact?

html

css

background-color

linear-gradients