brightness関数

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

構文

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

例

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

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

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

Результат:

例

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

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

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

Результат:

例

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

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

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

Результат:

関連項目