11

放射状グラデーションを使用chrome 18.0.1025.162して実行しようとしています

-webkit-radial-gradient(circle, rgba(100, 100, 100, 0.2), rgba(0, 0, 0, 0.9))

問題は、グラデーションが非常にピクセル化されたものであり、色とアルファの遷移がブロックであり、滑らかではないことです。これは、Safari と Firefox では異なります。SafariとFirefoxは非常にスムーズかつうまく機能します

これはクロムのバグですか？誰でもこれと同じ問題を抱えています。シンプルなグラデーションです！！きっとこんな単純なことでグリッチなんてあり得ない

チェックアウト: http://jsfiddle.net/GyRLe/1/私が意味することのデモについて。

これに対する解決策はありますか？画像はひどいでしょう:(

（スムーズさがどれほど悪いかを確認するために）：これは、私がそれを使用したときに得られるものです：http: //i.imgur.com/UYB1d.png（Chrome）
http://i.imgur.com/tzGuq。 png (Safari) (少しエッジが効いているように見えますが、それは png のためです。それ以外の場合は、完全な滑らかさに近いです)

Firefox は Safari と同じくらい良いですが、Chrome だけではダメです背景に繰り返しスタイルの画像を配置しているため、アルファが必要です

編集: Chrome 20 (Canary) にもこの恐ろしい問題がありました!

Edit2: CSS を使用する理由は、画像を使用する必要がないためです! だから私はこれをhttp://code.google.com/p/chromium/issues/detail?id=123491に追加しました& 私はクロムが素晴らしいと思うので、グーグルが彼らの行動をまっすぐにすることを願っています

4

3 に答える 3

3

アルファ値が必要ない場合は、 のrgb代わりに を使用すると、はるかに滑らかに見えrgbaます。

デモ: http://jsfiddle.net/tKtV9/

于 2012-04-14T21:43:45.303 に答える
2

かなり前に投稿されたことは知っていますが、次を使用してChrome 24で同じ問題（強いバンディング）に遭遇しました：

-webkit-radial-gradient(center, ellipse cover,  #XXXXXX 0%,#YYYYYY 100%);

しかし、バンディングの下のコードを使用すると、ほとんど消えてしまうことに気付きました。

-webkit-gradient(radial, center, 0px, center, 100%, color-stop(0%,#XXXXXX), color-stop(100%,#YYYYYY));

お役に立てれば。

編集: -webkit-gradient(radial, ...) は放射状グラデーション表示の古い構文にすぎないことがわかったので、その問題に対する長期的な答えにはなりません...

于 2013-02-10T16:09:51.997 に答える
0

この場合はあまり役に立ちませんが、追加することに気付きました

width: x-value;
height: y-value;

時々助けることができます。もちろん、X 値と Y 値はあなたの寸法です。

于 2012-04-14T22:03:49.223 に答える