Gradient Banding mit Alpha-Kanal

Ich möchte einen Farbverlauf von #111 zu transparent erstellen. Allerdings gibt es nicht viele Farben dazwischen, also bekomme ich gradient banding, was auch immer ich mache. Ich habe versucht, ein Bild und mehrere CSS-Gradienten-Methoden zu verwenden, nichts funktioniert.Gradient Banding mit Alpha-Kanal

Ich sehe immer noch die Streifenbildung, und das ist ein so großes Problem, dass ich Gradienten jetzt nicht verwenden kann. :/

Nur ein einfacher Test, Ihnen zu zeigen: http://codepen.io/AartdenBraber/pen/GWdapm?editors=1000

Es wäre für mich am besten, wenn diese nur mit CSS gelöst werden könnte. Ich habe schon versucht, mehrere Farbverläufe zu überlagern, aber das hat es nur noch schlimmer gemacht.

Quelle

2017-03-23 Aart den Braber

Banding kann über die Anzahl der Farben des Monitors hängt sehen. Selbst wenn Sie es perfekt auf Ihrem 100% sRGB IPS-Monitor gemacht haben, wird es nicht jeder andere so sehen - mit anderen Worten, nicht jedes Design übersetzt sich in Code. Ich habe das in den letzten 7 Jahren von einem Designer zu einem Entwickler gelernt – ntgCleaner

Ich habe es irgendwie repariert. Ich habe einen Container mit 'overflow: hidden;' hinzugefügt und dem Bild eine riesige Unschärfe hinzugefügt. Es funktioniert leider nur mit Bildern. –

Einige Browser zeigen eine Streifenbildung in css-Gradienten.

Sie könnten ein transparentes Rausch-Png unter dem CSS-Gradient kacheln.

http://noisepng.com kann das Bild erzeugen. Ich verwendete Größe 500, Intensität 90, Opazität 6.
Sie müssen möglicherweise die Werte anpassen, um das gewünschte Aussehen zu erhalten.

https://jsfiddle.net/h4075sm0/

HTML

<div class="gradient"> 
    <div class="noise"></div>  
</div>

CSS

html, body { 
    width: 100%; 
    height: 100%; 
} 

.noise { 
    width: 100%; 
    height: 100%; 
    background: url('https://i.imgur.com/UNfGD66.png'); 
} 

.gradient { 
    width: 100%; 
    height: 100%; 
    background: -moz-linear-gradient(top, rgba(17,17,17,1) 0%, rgba(17,17,17,0) 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, rgba(17,17,17,1) 0%,rgba(17,17,17,0) 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, rgba(17,17,17,1) 0%,rgba(17,17,17,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#00111111',GradientType=0); /* IE6-9 */ 
}

Quelle

2017-04-06 09:53:08

Gradient Banding mit Alpha-Kanal

Antwort

Verwandte Themen