css gradient background hinter mehreren Elementen

Question

Ich habe einen Hintergrund mit Farbverlauf, den ich hinter einem Hamburger-Menü-Symbol anwenden möchte.

<button type="button" id="btn-menu"> 
    <span></span> 
    <span></span> 
    <span></span> 
</button> 

Der Hintergrund muss auf die span Elemente anzuwenden, NICHT auf der button. Was ich geschafft habe, ist, den Hintergrund auf JEDEN span anzuwenden - aber das ist nicht der Effekt, den ich will. Bitte beachten Sie diese Geige für eine bessere Vorstellung von dem, was ich zu erreichen versuchen:

https://jsfiddle.net/spacyad6/

Wie Sie sehen, jede Spanne genau gleich aussieht. Was passieren muss, ist, dass die untere Spannweite kaum blau sein sollte, die mittlere Spannweite sollte eine größere grüne Fläche haben und die obere Spannweite sollte eine größere blaue Fläche haben.

Gibt es eine clevere Möglichkeit, dies zu tun? Idealerweise würde ich lieber nicht 3 separate Gradienten haben. Die Lösung muss in Firefox, Chrome & Safari funktionieren.

Answer 1

Ich aktualisierte Ihre js Geige mit my solution.

Die Idee ist, span nicht die Farbe anzuzeigen, sondern um es zu verbergen.

Relevante Teil der Änderungen:

<div id="gradient"> 
    <span></span> 
    <span></span> 
</div> 

#gradient { 
    position : relative; 
} 

#gradient span { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: calc((150px - 45px)/2); 
    background-color : #f3f5f6; 
} 

#gradient span:nth-child(1) { 
    top: 15px; 
} 

#gradient span:nth-child(2) { 
    bottom: 15px; 
} 

Für diese Lösung müssen Sie wissen:

• Die Hintergrundfarbe hex
• Die Höhe Ihrer Taste
• Die Höhe des span Sie wollen

Was bei normalem Gebrauch kein Problem sein sollte.

Nachteil:

• hartcodierte Werte benötigen als für die Herstellung einer border-radius oder etwas Ähnliches für die gefälschten Spannweiten vor
• Viel Glück erklärt jetzt

Answer 2

Hier ist eine Möglichkeit zu tun es:

• Definieren Sie den Hintergrund in der gemeinsamen #btn-menu span Stil Element
• die Hintergrundgröße Stellen Sie die Knopfgröße
• Für jede Spanne übereinstimmen, vertikale background-position-y an den entsprechenden Set

Im Codeausschnitt unten versetzt, zeigte ich drei Farben im Verlauf der Wirkung mehr zu machen offensichtlich. Das gleiche Beispiel wird in this jsfiddle gezeigt.

#btn-menu { 
 
    float: left; 
 
    width: 150px; 
 
    height: 150px; 
 
    position: relative; 
 
    background: none; 
 
    border: none; 
 
    z-index: 5000; 
 
    position: relative; 
 
} 
 

 
#btn-menu span { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 15px; 
 
    background-image: linear-gradient(45deg, red 20%, yellow 60%, blue 100%); 
 
    background-size: 150px 150px; 
 
} 
 

 
#btn-menu span:nth-child(1) { 
 
    top: 0; 
 
    background-position-y: 0px; 
 
} 
 

 
#btn-menu span:nth-child(2) { 
 
    top: 65px; 
 
    background-position-y: -65px; 
 
} 
 

 
#btn-menu span:nth-child(3) { 
 
    bottom: 0; 
 
    background-position-y: -135px; 
 
} 
 

 
#gradient { 
 
    float: left; 
 
    margin-left: 50px; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-image: linear-gradient(45deg, red 20%, yellow 60%, blue 100%); 
 
}

<button type="button" id="btn-menu"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</button> 
 

 
<div id="gradient"></div>