filter プロパティ

プロパティ filter は、 背景画像に特定の芸術的スタイルや フィルターを設定します。このプロパティは、 値として、filter 関数で形成される芸術的スタイルの名称 または none（選択したフィルターの 解除）を取ることができます。

構文

cssセレクター {
  filter: 芸術的スタイル または none;
}

例

画像に白黒フィルターを設定し、 ホバー時にそれを解除してみましょう：

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

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

Результат:

関連項目