【BasicImage()】複数のフィルタ効果をまとめて指定

filterプロパティのBasicImage()では、複数のフィルタ効果をまとめて指定することができます。 例えば、画像やテキストに回転、透過、左右反転、色彩反転、X線写真効果、マスク処理、グレースケール化などの視覚効果を設定するには、このBasicImageフィルタで指定します。

それぞれの効果はパラメータで指定して下さい。 また複数のパラメータを指定して、同時に複数の効果を表現する事もできます。 その場合は「Invert=1,GrayScale=1」というようにカンマ「,」で区切り続けてパラメータを指定します。

なおフィルタを適用するには、適用する要素に対しposition: absolute、またはwidthheightでフィルタを適用する領域を指定する必要があります。

※詳しくはfilterを参照下さい。

また、マスク処理をする場合、画像であればgif形式、テキストの場合は背景色を指定していない要素に対して有効となります。

※マスク処理とは画像や文字の透明な部分に色を付ける機能で、型抜きしたように輪郭だけで表示する事ができます。

書式

  • filter:progid:DXImageTransform.Microsoft.BasicImage(★) ……… 複数のフィルタ効果をまとめて指定

★:GrayScale=グレースケール、Invert=色反転、他下記参照

GrayScale=グレースケール
グレースケールで表示します。「1」で表示、「0」で表示しない
Invert=色反転
色を反転して表示します。「1」で表示、「0」で表示しない
Xray= X線効果
X線写真のように白黒反転して表示します。「1」で表示、「0」で表示しない
Opacity=透明度
0.0~1.0の範囲で透明度を指定します。「0.0」で透明、「1.0」で不透明
Mask=マスク処理
マスク処理をして表示します。「1」で表示、「0」で表示しない
MaskColor=マスク処理時の色
マスク処理をした際に塗りつぶす色を指定します。1~16777216の色番号で指定(Mask=1の時に有効となる)
Mirror=左右反転
左右を反転して表示します(ミラー表示)。「1」で表示、「0」で表示しない
Rotation=回転角度
右へ回転する角度を指定します。「0」回転なし、「1」90度、「2」180度、「3」270度。(初期値0)
enabled
フィルタを実行するか指定します。有効にする場合「1」または「true」、無効にする場合は「0」または「false」を指定。

使用した時の例

.sample1 img{
  filter:progid:DXImageTransform.Microsoft.BasicImage(GrayScale=1, Opacity=0.3);
}
<p>フィルタを適用していない画像<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample1">sample1を適用した画像。(GrayScale=1, Opacity=0.3)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>

ブラウザ上の表示例

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

sample1を適用した画像。(GrayScale=1, Opacity=0.3)

※IE9以下の場合適用されます

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

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

関連情報