是否可以在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>

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

正如你所看到的那样 - 它从左到右渐变 - 位于条纹的顶部。

我尝试使用以下方法添加它：之后 - 并且它正在工作 - 但我已经拥有此元素的伪元素 - 所以它会覆盖它。是否可以添加多个：元素之后？或者他们是一个更好的方法，只用Css实现这种效果？ （请不要js）。

由于

Answer 1

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

• 顶层：从左侧的不透明度1开始以#7cd4cf开头的线性渐变，右侧以不透明度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>

Answer 2

你必须包裹linear-gradient的{​​{1}}。喜欢这个

div

在您的代码中

background: linear-gradient(90deg, pink 50%, cyan 50%);

如果您需要更多详细信息，请查看以下链接：jsfiddle

Answer 3

2个具有透明度的渐变：

.foo{
    background-image: repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, rgba(73, 200, 193, 0.3) 2px, rgba(73, 200, 193, 0.3) 4px), linear-gradient(45deg, #7cd4cf, rgba(73, 200, 193, 0.3));
  width:250px;
  height:250px;
}

<div class="foo">

</div>