【xray()】X線写真のように白黒反転する

filterプロパティのxray()では、X線写真のように白黒反転させることができます。 これはグレースケールにして反転させるなど、X線効果を表現したい際に使用します。

またfilterプロパティのBasicImage(xray=1)でも、xray()と同様の表示ができます。

書式

  • filter:xray() ……… X線写真のように白黒反転する

使用した時の例

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

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

ブラウザ上の表示例

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

xray()を適用した画像。

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

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

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

プロパティ 独自拡張
対応ブラウザ Internet Explorer4~
※IE10以降は未対応

関連情報