不透明度とCSSフィルター

画像上にテキストを配置する場合、常に読みやすさの問題に直面します。

私はこの問題を解決するために、不透明度をいじることがよくあります。また、CSS Filter プロパティとその多くの効果もあります。

デフォルトでは、後者の方が不透明度よりも定性的なレンダリングを提供すると思います。しかし、これについてははっきりさせておきたいと思います。

不透明度あり

簡単です。親要素に背景色を追加し、画像の不透明度プロパティを操作します。

.element-parent {
  background-color: #000;
}

.element-image {
  opacity: 0.7;
}

CSSフィルターあり

フィルター プロパティを使用すると、フィルターまたはグラフィック効果を適用できます。
このプロパティは、ぼかし、明るさ、コントラスト、ドロップシャドウ、グレースケール、色相回転、反転、不透明度、彩度、セピアのフィルターを提供します。

ここで私が興味があるフィルターは明るさです。
不透明よりもさらに簡単です。画像要素にフィルター プロパティを適用します。

.element-image {
  filter: brightness(0.7);
}

結果

比較用にコードペンを作成しました。
左側が不透明度バージョン、右側がフィルターバージョンです。
レースの結果、違いは見当たりません!

どのソリューションを使用すればよいか迷っているなら、それは voulvoul のようなものだと私は言います。あなたに一番似合うもの。

以上が不透明度とCSSフィルターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。