Wie kann ich CSS-Gradienten-Banding verhindern?

Question

Ich benutze CSS-Verläufe anstelle von tatsächlichen Bildern, und zwar aus zwei Gründen: erstens lädt der CSS-Farbverlauf definitiv schneller als ein Bild, und zweitens sollten sie keine Streifenbildung zeigen, wie so viele Rastergrafiken. Ich habe in letzter Zeit meine Website auf verschiedenen Bildschirmen getestet, und auf größeren (24+ Zoll) zeigt der lineare CSS-Verlauf, der den Hintergrund meiner Website darstellt, sehr sichtbare Streifenbildung. Als vorläufige Lösung habe ich den Farbverlauf mit einem kleinen, sich wiederholenden, transparenten PNG Rauschbild überlagert, das ein wenig hilft. Gibt es eine andere Möglichkeit, dieses Banding-Problem zu beheben?

Answer 1

Ich weiß, dass Sie nicht den Klang von diesem mögen, aber die einzige echte Weg, um jetzt eine konsistente browserübergreifende Ästhetik in diesem Fall, ist es, ein sich wiederholendes Bild zu verwenden.

Wenn es sich um einen einfachen linearen Farbverlauf handelt, müssen Sie nur 1 Pixel breit und so hoch wie der Farbverlauf sein. Dann sollten Sie die Hintergrundfarbe der Seite als letzte Farbe des Farbverlaufs festlegen. Dies wird die Dateigröße klein halten.

Wenn Sie Farbverlaufsbänder in Ihrem Bild reduzieren möchten, verwenden Sie ein PNG (nicht Transparenz), da ich finde, dass diese besser als JPGs für diesen Zweck geeignet sind.

In Adobe Fireworks würde ich dies als PNG-24 exportieren.

Viel Glück.

http://codepen.io/anon/pen/JdEjWm

#gradient { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white)); 
    background: -webkit-linear-gradient(top, black, white); 
    background: -moz-linear-gradient(top, black, white); 
    background: -ms-linear-gradient(top, black, white); 
    background: -o-linear-gradient(top, black, white); 
    background: linear-gradient(top, black, white); 
} 

Answer 2

Es gibt nicht wirklich eine Methode, um die Streifenbildung zu entfernen. CSS-Verläufe sind den verschiedenen Rendering-Engines der Browser ausgeliefert. Einige Browser rendern einfach besser als andere. Das Beste, was Sie tun können, sind kurze Bereiche, die abgedeckt werden müssen, und größere Farbbereiche, um die Gradientenschritte zu erhöhen .... Warten Sie dann, bis sich der Browser verbessert hat.

Answer 3

Sie können den Farbverlauf geht von der ersten Farbe zu transparent, mit einem background-color darunter für Ihre zweite Farbe etwas bessere Ergebnisse erzielen, indem sie. Ich würde auch empfehlen, mit background-size herumzuspielen für große Farbverläufe, die sich über den Bildschirm erstrecken, so dass der Farbverlauf nicht den gesamten Bildschirm ausfüllt.

Answer 4

Ich machte eine "scatter.png" mit meinem Farbverlauf zu setzen. Wie folgt aus:

1. öffnen Gimpe
2. 100x100 Bild
3. Alphakanal hinzufügen
4. Filter -> Lärm -> Hurl ... Standardwerte übernehmen
5. Set opactity bis 5%

6. speichern und dann zum Farbverlauf hinzufügen.

   background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%); 
   

Es ist eine subtile Wirkung auf eine subtile Wirkung.

Answer 5

Für eine reine CSS-Antwort können Sie einen Unschärfe-Filter verwenden, um dem css-Farbverlauf eine Unschärfe hinzuzufügen und die Streifenbildung zu verringern. Es kann bedeuten, dass die Hierarchie neu erstellt wird, um den Inhalt nicht zu verwischen, und Sie müssen den Überlauf ausblenden, um scharfe Kanten zu erhalten. Funktioniert wirklich gut auf einem animierenden Hintergrund, wo das Banding-Problem besonders schlimm sein kann.

.blur{ 
    overflow:hidden; 
    filter: blur(8px); 
} 

Answer 6

Ich weiß, diese Frage ist längst gelöst, aber für andere erleben Banding und auf der Suche nach einer Lösung, eine sehr einfache Lösung für mich war die Vereinfachung nur die Farben, die ich in meinem Gradienten enthalten. Zum Beispiel:

Dieser Gradient erzeugt Banding:

background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%, 
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%); 

Dieser Gradient nicht der Fall, und sieht sehr ähnlich:

background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);