初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL13. IE独自拡張による設定　その2 ★ フィルタ3 一部を透過する−クロマとマスク−（IE5.5以降で有効）

※フィルタそのものはIE4.0以降から有効なものもありますが、指定する書式が違い、IE5.5以前のブラウザは既に一般的でないため、ここではIE5.5以降で有効な書式で解説してゆきます。形式は、どのフィルタも「filter: progid:DXImageTransform.Microsoft.」の後に入る部分を変えることにより、種類を指定します。

要素の一部を透過して表示するフィルタには、以下の2種類があります。

filter: progid:DXImageTransform.Microsoft.Chroma（詳細設定） ... 指定した1色を透過します。

filter: progid:DXImageTransform.Microsoft.MaskFilter（詳細設定）  

　　... 画像の可視部分を透過し、元の透過部分を単色で塗りつぶします。

１.「filter: progid:DXImageTransform.Microsoft.Chroma（詳細設定）」

color ... 透過する色(RGB値、もしくは色名)

※スタイルシートで使える色指定について詳しくは「Column 8.スタイルシートと色指定」を参照して下さい。

enabled ... フィルタの実行　（実行...「true」 もしくは「1」 / 実行しない...「false」 もしくは「0」）

（但し、enabled はデフォルトが「true」のため、特に指定しなくても実行されます。）

色は（）内に指定し、「enabled」 も指定する時は「,」で区切って並べます。

filter: progid:DXImageTransform.Microsoft.Chroma(color=#FF0000,enabled=true);

元の画像	赤（#FF0000）の文字を透過

CSSとHTMLでは、それぞれ以下のように書かれています。

２.「filter: progid:DXImageTransform.Microsoft.MaskFilter（詳細設定）」

color ... 元の画像で透過されている部分を塗りつぶす色(RGB値、もしくは色名)

（スタイルシートで使える色指定について詳しくは「Column 8.スタイルシートと色指定」を参照して下さい。）

enabled ... フィルタの実行　（実行...「true」 もしくは「1」 / 実行しない...「false」 もしくは「0」）

（但し、enabled はデフォルトが「true」のため、特に指定しなくても実行されます。）

色は（）内に指定し、「enabled」 も指定する時は「,」で区切って並べます。

filter: progid:DXImageTransform.Microsoft.Chroma(color=#FF6633,enabled=true)

元の画像	元の画像の透明部分をオレンジ（#FF6633）で表示

CSSとHTMLでは、それぞれ以下のように書かれています。

以上は画像を使って解説しましたが、段落（ｐ）などの要素にフィルタをかけて文字を装飾することもできます。詳細はこちらをご覧下さい。

初級篇2.VOL13. IE独自拡張による設定・その2-2 <<

>> 初級篇2.VOL13. IE独自拡張による設定・その2-4