【CSS Modules】brightness()関数の使い方
brightness()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
brightness()関数は、ウェブページ上の要素の明るさを調整する機能を提供する関数です。CSSのfilterプロパティの値として使用され、画像やビデオ、あるいはHTML要素全体といった対象の視覚的な明るさを変更するために利用されます。
この関数は引数として数値を一つ受け取ります。この数値は、元の明るさに対する倍率や割合をパーセンテージで指定します。例えば、brightness(1)またはbrightness(100%)と指定すると、要素は元の明るさのまま表示されます。brightness(0)またはbrightness(0%)を指定した場合、要素は完全に暗くなり、真っ黒な状態になります。逆に、brightness(2)またはbrightness(200%)と指定すると、要素は元の2倍の明るさで表示されます。この値は0以上の数値を指定することができ、それによって要素をより明るくすることが可能です。
brightness()関数を使用することで、ウェブデザイナーはユーザーインターフェースの見た目を調整したり、特定の要素を際立たせたり、画像に特定の視覚効果を加えたりすることができます。これは、ウェブコンテンツのアクセシビリティやデザインの柔軟性を高める上で重要なツールの一つです。
公式リファレンス: brightness()
構文(syntax)
1filter: brightness(150%);
引数(parameters)
<number-percentage>
- <number-percentage>: 画像の明るさを調整するための数値またはパーセンテージ
戻り値(return)
戻り値なし
戻り値はありません