【invert()】色を反転する(明度・彩度・色相)

filterプロパティのinvert()では、テキストや画像の色(明度・彩度・色相)を反転して表示する事ができます。 色の反転はfilterプロパティのBasicImage()でもできますが、効果は同様の結果となります。

また書式などについて詳しくはfilterを参照下さい。

書式

  • filter:invert() ……… 色を反転する

使用した時の例

.sample1 img{filter: invert();}
.sample2 span{filter: invert();}

span {font-weight:bold; font-size:20px; color:#004DFD;}
<p>フィルタを適用していない画像<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample1">invert()を適用した画像。<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p>フィルタを適用してないテキスト<br />
  <span>このテキストの色を反転</span>
</p>
<p class="sample2">invert()を適用したテキスト<br />
  <span>このテキストの色を反転</span>
</p>

ブラウザ上の表示例

フィルタを適用していない画像

invert()を適用した画像。

フィルタを適用してないテキスト
このテキストの色を反転

invert()を適用したテキスト
このテキストの色を反転

対応ブラウザなどのデータ

プロパティ 独自拡張
対応ブラウザ Internet Explorer4~

関連情報