在CSS背景上分层多个渐变
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在CSS背景上分层多个渐变相关的知识，希望对你有一定的参考价值。
我想创建一个带有两个渐变的背景 - 彼此叠加在一起。
我创建了下面的例子，似乎我不能把多个渐变放在一起。 （该示例基于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>也许以下约束可以防止分层渐变：
只有最后一个背景可以包含背景颜色。
如果不允许将两个渐变层叠为背景，我应该如何以另一种方式对它们进行分层？
答案
我想你要找的是这个。
你的代码有什么问题？
好吧，你的每个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>以上是关于在CSS背景上分层多个渐变的主要内容，如果未能解决你的问题，请参考以下文章