アルファチャンネルのグラデーションバンディング

Question

#111からtransparentまでのグラデーションを作成したいと思います。しかし、間には色が多くないので、私は何でもグラデーションバンディングをします。私は画像といくつかのCSSグラジエントメソッドを使用しようとしましたが、何も動作しません。

私はバンディングを見ているだけです。それは今ではグラデーションを使用できないほど大きな問題です。 ：あなたを表示する/

だけの簡単なテスト： http://codepen.io/AartdenBraber/pen/GWdapm?editors=1000

これが唯一のCSSで解決することができれば、それは私にとって最高のだろう。私はすでにいくつかのグラデーションを重ね合わせてみましたが、それだけが悪化しました。

Answer 1

一部のブラウザでは、CSSグラデーションでバンディングが表示されます。

CSSのグラデーションの下に透明ノイズPNGをタイルすることができます。

http://noisepng.comイメージを生成できます。サイズ500、強度90、不透明度6を使用しました。
希望する外観を得るために値を調整する必要があります。

---

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 */ 
}