38

CSS 不透明度を単色に適用していると仮定します。メモリとパフォーマンスの観点から、rgba 値または color+opacity を使用する方が良いですか?

4

4 に答える 4

45

他の人が述べているように、rgba()そしてopacity異なって働く：

  • rgba()CSSの対象となる要素、およびこれらの要素のみのcolor、、background-colorなどの単一のプロパティに影響しますborder-color
  • opacityターゲット要素のすべてのプロパティ（全体の見通し）とそのすべてのDOMツリーの子に影響します

それでも、これらのいずれかを使用して多くの効果を達成でき、パフォーマンス/互換性は異なるため、この質問は無意味ではありません。

私の経験から、プロパティの使用と特にアニメーション化はopacity、Webkitブラウザで有名なテキストアンチエイリアスグリッチを引き起こす最も簡単な方法です（特にSafari、SafariでCSSトランジションにカーソルを合わせると、特定のフォントの色が明るくなります）。opacityこれは、要素の1つではなく階層全体に影響を与えるという事実と、ブラウザが再描画される要素を適切に区別できない場合があるためです。を使用する場合、このような問題は発生しませんrgba()。

さらに、ほぼ最新のv12.11を含む多くのバージョンのOperaは、のいくつかの使用シナリオで深刻なグラフィックグリッチを生成しますopacity。不透明度をテキスト、画像の背景、テキストの影と混ぜ合わせてから、ページまたはdivをスクロールするのが、問題を再現する最も簡単な方法です。iOSバージョンのSafariでも同様の問題が発生しました。繰り返しますが、。にはそのような問題はありませんrgba()。

これらのことは理由で起こります。レンダリングの観点から、rgba()for color/ background-color/を使用する場合border-color、影響を受けるDOM要素と要素のグラフィックレイヤーをブラウザに明示的に通知します。これにより、ブラウザはいつ再描画する必要があるかを簡単に把握できます。また、効果の範囲を絞り込むことは、パフォーマンスの向上を保証します。これは、両方のオプションを試し、特にSafariとOperaで、非常にスムーズrgba()に感じられる代わりにWebサイトを使用していることに気づきました。opacity

確かに、画像のフェードなどはrgba()（mask-image十分にサポートされていない）では実現できませんが、単純な透明なテキストや背景などのタスクrgba()には、より適切な選択のようです。CSS3アニメーションと組み合わせるとさらにそうです。

ああ、使用するときは常にフォールバックを含めることを忘れないでrgba()ください：

.el {
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 0.5);
}
于 2013-02-03T21:13:09.520 に答える
11

opacityopacity要素全体にのみ適用されるため、プロパティを使用してアルファ チャネルを色に適用することはできません。rgba()これは(またはhsla()) 関数でのみ行うことができます。

したがって、rgba()/hsla()はそれを行う唯一の方法であるため、すべての面で優れています。

于 2012-11-14T19:06:29.647 に答える