2017-12-20 34 views
1

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?

Antwort

2

Ich denke, was Sie suchen, ist dies.

Was ist das Problem mit Ihrem Code?

Nun, jede Ihrer gradient is non-transparent, so wird man Überlappung die andere vollständig und deshalb nur eine sichtbar ist. Die Problemumgehung ist, Sie geben make use of rgba(x,y,z,alpha), um ihnen Alpha transparency zu geben, die dem Hintergrund einen Verblassungseffekt gibt, um durch einander zu sehen.

.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>