Ich möchte einen Hintergrund mit zwei Farbverläufen erstellen - übereinander geschichtet.Mehrere Verläufe auf CSS Hintergrund überlagern
Ich habe das folgende Beispiel erstellt, und es scheint, als ob ich nicht mehrere Gradienten zusammenlegen kann. (Das Beispiel wurde auf Basis von MDN-Using multiple backgrounds & MDN-gradient erstellt)
.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>
Vielleicht ist die folgende Einschränkung verhindert Schichtung Steigungen:
Nur der letzte Hintergrund kann eine Hintergrundfarbe enthalten.
Wenn zwei Farbverläufe nicht als Hintergrund übereinander gelegt werden sollen, wie sollte ich sie auf andere Weise übereinander legen?