brightness関数

brightness関数は、背景画像の明るさを変更することができます。背景の元の明るさは 100%または1の値で定義され、これらの値を下げると画像の明るさも下がります。同様に、値を100%以上に上げると明るさは上がります。負の値は適用されず、空の値は自動的に1として認識されます。

構文

セレクタ {
	filter: brightness(数値);
}

例

画像の明るさを 20%に設定してみましょう：

<div id="elem"></div>

#elem {
	filter: brightness(20%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

例

では今度は、画像の明るさを 120%まで上げてみましょう：

<div id="elem"></div>

#elem {
	filter: brightness(120%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

例

画像に元の明るさを設定してみましょう：

<div id="elem"></div>

#elem {
	filter: brightness(1);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

brightness関数

構文

例

例

例

関連項目