Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【CSS Modules】flood-opacityプロパティの使い方

flood-opacityプロパティの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

flood-opacityプロパティは、Scalable Vector Graphics (SVG) におけるフィルター効果の一つであるfeFloodプリミティブによって生成される洪水領域の色の不透明度を制御するプロパティです。このプロパティは、flood-colorプロパティで指定された色の透明度を調整するために使用されます。具体的には、値として0.0(完全に透明)から1.0(完全に不透明)までの数値を指定します。例えば、0.0を指定するとその色は完全に透明になり、結果として表示されません。一方、1.0を指定すると完全に不透明となり、色がはっきりと表示されます。このプロパティのデフォルト値は1.0です。flood-opacityを活用することで、SVGフィルターを適用した際に、特定の色がどれくらいの透明度で表示されるかを細かく制御できるようになります。また、アニメーションにも対応しており、時間経過とともに不透明度を動的に変化させることで、より高度で表現豊かなグラフィック効果を実現することが可能です。主にSVGのグラフィック表現において、色の見え方を細かく調整する際に重要な役割を果たします。

公式リファレンス: flood-opacity

構文(syntax)

1.element {
2  flood-opacity: 0.75;
3}

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ

関連プログラミング言語