在 CSS 背景上分层多个渐变答案

【问题标题】：Layering Multiple Gradients on CSS Background在 CSS 背景上分层多个渐变
【发布时间】：2017-12-20 19:22:40
【问题描述】：

我想创建一个具有两个渐变的背景 - 相互叠加。

我创建了以下示例，但似乎我无法将多个渐变放在一起。（示例基于MDN-Using multiple backgrounds & MDN-gradient创建）

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
.linear-repeat {
  background: repeating-linear-gradient(45deg,
      blue, blue 5px, white 5px, white 10px);
}
.combined-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255)), 
    repeating-linear-gradient(45deg, blue, blue 5px, white 5px, white 10px);
}

<div class="radial-gradient">radial gradient</div><br/>
<div class="radial-gradient linear-repeat">linear gradient</div><br/>
<div class="radial-gradient linear-repeat">combined gradient 1</div><br/>
<div class="combined-gradient">combined gradient 2</div>

也许以下约束会阻止分层渐变：

只有最后一个背景可以包含背景颜色。

如果不允许将两个渐变分层作为背景，我应该如何将它们分层？

【问题讨论】：

标签： css background gradient

【解决方案1】：

我想你要找的是这个。

您的代码有什么问题？

好吧，你的每个gradient is non-transparent，所以一个会完全重叠另一个，这就是为什么只有一个可见。解决方法是，你 make use of rgba(x,y,z,alpha) 给他们 alpha transparency 这给背景一个淡入淡出效果，让他们看穿。

.combined-gradient1 {
  background: repeating-linear-gradient(45deg, rgba(00, 00, 255, 0.8), rgba(00, 00, 255, 0.8) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px), radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8));
}

.combined-gradient2 {
  background: radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8)), repeating-linear-gradient(45deg, rgba(00, 00, 255, 1), rgba(00, 00, 255, 1) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}

<div class="combined-gradient1">combined gradient 1</div>
<br>
<div class="combined-gradient2">combined gradient 2</div>

【讨论】：