【MaskFilter()】指定の色でマスクをかける

filterプロパティのMaskFilter()では、画像やテキストに指定した色でマスクをかけて型抜きしたように表示する事ができます。

マスクをかけるとは、画像やテキストの透明な部分に色を付けて表示し、画像やテキストを型抜きしたように輪郭だけで表現する事を指します。

※マスク処理すること指す

このようなマスク処理をする場合、画像であれば透過GIF形式、テキストなら背景色を設定していない要素に対し有効となります。

なおこのプロパティは、Internet Explorer10以降では未対応となっています。 また書式などの詳しい説明についてはfilterを参照して下さい。

書式

  • filter:progid:DXImageTransform.Microsoft.MaskFilter(★) ……… 指定した色でマスクをかける(IE5.5)
  • filter:mask(★) ……… 指定した色でマスクをかける(IE4以上)

★:Color=マスクの色

Color=マスクの色
マスクの色(塗りつぶす色)をRGB値やカラーネームで指定します。色についてはカラーコード一覧を参照下さい。

使用した時の例

.sample1{
  filter:progid:DXImageTransform.Microsoft.MaskFilter(color=gray);
}
.sample2{
  filter:mask(color=gray);
}

p {width:100%;}
<p>フィルタを適用していない画像<br />
  <img src="image.gif" alt="">
</p>
<p class="sample1">sample1を適用した画像。MaskFilter(color=gray)<br />
  <img src="image.gif" alt="">
</p>
<p class="sample2">sample2を適用した画像。mask(color=gray)<br />
  <img src="image.gif" alt="">
</p>

ブラウザ上の表示例

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

sample1を適用した画像。MaskFilter(color=gray)

sample2を適用した画像。mask(color=gray)

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

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

関連情報