53

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%);

レンダリングはSafari6（mac）で必要なもののように見えます： Safari 6 Mac OS 10.8

Chromeのレンダリングは、白にフェードする前に灰色にフェードします（Firefoxはmac osでもこのようにレンダリングします）： Chrome 21 Mac OS 10.8

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

4

5 に答える 5

90

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

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

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

編集： Chrome 21（Windows 7）で期待どおりにレンダリングされる自分のバージョンへのリンクを投稿するのを忘れました。

于 2012-08-06T13:46:26.480 に答える
29

ここに貼り付けた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グラデーションのアルファ透明度をどのように扱っているかとの矛盾を依然として示しています。

于 2012-08-06T14:01:27.460 に答える
5

白以外の色（実際には白）の秘訣はrgba、実際の色が薄くなっていることです。

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

使用されている色が（のように#6faef9） 16進数の場合は、16進数からrgbaへのコンバーターを使用して色を変換します。

于 2019-11-18T20:00:58.707 に答える
3

同じ問題がネイティブIOSでも発生します。

  1. iOSの白から透明なグラデーションレイヤーは灰色です
  2. https://betterprogramming.pub/the-proper-way-of-creating-a-transparent-gradient-layer-in-ios-b082daa866b1layer-is-gray

CSSでの解決策は、黒ではなく白を使用してから、透明度0を追加することです。

rgb(255 255 255/0)
于 2021-08-02T20:44:29.273 に答える
1

私は最近、サファリの透明性に関して同じ問題に遭遇しました。私のために働いたのは、コンパイルされたサファリcssにcssを置き換えることでした。

これは私にはうまくいきませんでした

 background-image: linear-gradient(to top, rgba(56,56,56,1) 5%, rgba(255,255,255,0.001) 100%)

これは私のために働いた

background-image: linear-gradient(0deg,#383838 5%, hsla(0, 0%, 20%, 0) 100%)
于 2021-02-22T07:47:26.150 に答える