invert関数
invert関数は、
背景画像の色を反転させることができます。
0の値は、
画像が元のままであることを意味します。
100%または1の値は背景色を完全に反転させます。
この範囲内の任意の数値は色を部分的に反転させます。
負の値は指定できません。
デフォルト値は0です。
構文
セレクタ {
filter: invert(数値);
}
例
画像の色を50%の値まで反転させてみましょう：
<div id="elem"></div>
#elem {
filter: invert(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
次に、画像の色を100%の値まで反転させてみましょう：
<div id="elem"></div>
#elem {
filter: invert(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
次に、invert関数の値を
0に設定してみましょう：
<div id="elem"></div>
#elem {
filter: invert(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
関連項目
-
背景をぼかす
blur関数、 -
背景の明るさを設定する
brightness関数、 -
背景のコントラストを設定する
contrast関数、 -
背景に影を設定する
drop-shadow関数、 -
背景の色相を回転させる
hue-rotate関数、 -
背景の不透明度を設定する
opacity関数、 -
背景をセピア調に変換する
sepia関数、 -
背景のための一括指定プロパティである
backgroundプロパティ、 -
ブロックに背景画像を設定できる
background-imageプロパティ、 -
背景のスタイルを設定する
filterプロパティ
