html - 是否可以在 css 中组合 2 种背景颜色？

Question

我有一个渐变元素作为背景色，

.foo{
    background-image: repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);
  width:250px;
  height:250px;
  
}

<div class="foo">

</div>

我需要在它的顶部添加一个渐变叠加 - 所以它看起来像这样:

如您所见 - 它在条纹顶部从左到右渐变。

我已经尝试使用 :after 添加它 - 它正在工作 - 但我已经有了这个元素的伪元素 - 所以它覆盖了它。是否可以添加多个 :after 元素？或者也许他们是仅使用 Css 实现该效果的更好方法？ (请不要js)。

谢谢

Answer 1

这是可能的，如果且仅覆盖层将是纯色。您只需在底层重复线性渐变上叠加一个额外的水平渐变，#7cd4cf 淡出到不透明度为 0。

• 顶层:线性渐变以 #7cd4cf 开始，左边不透明度为 1，右边以不透明度 0 结束
• 底层:您的原始图案

考虑到这个逻辑，顶层可以这样编码:linear-gradient(90deg, rgba(124,212,207, 1), rgba(124,212,207,0))。请注意，#7cd4cf 对应的 rgb 颜色是 rgb(124,212,207)。

请注意，背景图像从下到上堆叠，即最后指定的背景图像将位于堆栈的底部。

.foo {
  background-image:
    linear-gradient(90deg, rgba(124, 212, 207, 1), rgba(124, 212, 207, 0)),
    repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);
  width: 250px;
  height: 250px;
}

<div class="foo">

</div>