web-dev-qa-db-ja.com

透明から白へのCSS3グラデーションレンダリングの問題

CSS3グラデーションのクロスブラウザーレンダリングに問題があります。これは、透明色から白へのグラデーションを作成しようとしているときに発生します。

テストに使用しているファイルは次のとおりです： http://f.cl.ly/items/0E2C062x3O161b09261i/test.html

使用されるCSSは次のとおりです。

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);

レンダリングは、Safari 6（mac）で必要なものに似ています。 Safari 6 Mac OS 10.8

Chromeレンダリングは白にフェードする前に灰色にフェードします（FirefoxはMac OSでもこの方法でレンダリングします）。 Chrome 21 Mac OS 10.8

この奇妙なレンダリングがなぜなのかについてのアイデアや提案はありますか？

cssgradient
36
phawk

私もこれに遭遇しました。なぜそうなるのかはわかりませんが、自分のプロジェクトで回避策として使用したものを以下に示します。

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);

Chromeに「透明」な値を与える代わりに、非常に透明に近い値を与えます。お役に立てれば！

編集：Chrome 21（Windows 7）で期待どおりに表示される、自分の version へのリンクを投稿するのを忘れました。

65
wavetree

ここに貼り付けたCSSが間違っていました。間違ったファイルDOHを編集していました。

元のCSSが機能しない

background-image: linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);

問題を修正したCSS

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);

透明であることの問題は色ではなく、アルファが0の黒であり、アルファが0の白に設定すると問題が解決します。 （@carisendaに感謝）

これは依然として、ブラウザーベンダーがCSS3グラデーションのアルファ透明度をどのように処理しているかとの不整合を指摘しています。

26
phawk

白以外の色（実際には白）のトリックは、rgba退色している​​実際の色です。

background-image: linear-gradient(to right, 
  rgba(111,174,249, 0) 0%,
  rgba(111,174,249, 0) 80%,
  rgb (111,174,249)    100%);

使用されている色が16進数の場合（#6faef9など）、 hex to rgba converter を使用して色を変換します。

0
WEBjuju