サイト内検索

...スタイルシート(css)...

スタイルシート・フィルタ

複数の効果を使う

複数の効果を使うフィルタは、basicimageプロパティを指定します。
複数のフィルタを同時に指定する場合は、半角スペースで区切って書きます。
[使い方]
[スタイルシート]
.sample{
filter: basicimage(mask=数値, invert=数値, maskcolor=カラーコード番号);
}
[bodyの中]
<img src="../img/sample.jpg" class="sample">
IEのみに対応しています。
[メモ]
プロパティprogidは、
W3C・CSS検証サービスでは、推奨されていません。
プロパティ名 説明
mirror 0 (0) 左右反転しない。
1 左右反転します。
rotation 0 (0) 回転しない。
1 時計回りに90°回転
2 時計回りに180°回転
3 時計回りに270°回転
invert 0 (0) 色を反転しない。
1 色を反転します。
grayscale 0 (0) 白黒にしない。
1 白黒にします。
xray 0 (0) 反転して白黒にしない。
1 反転して白黒にします。
opacity 0.00〜1.00 (1.00) 不透明度を指定します。(0=透明)
mask 0 (0) 透明・不透明を反転させない。
1 透明・不透明を反転させます。
maskcolor カラーコード番号 反転させたときの色(mask=1の時のみ)
enabled 0/false (1)フィルタを実行しない。
1/trueフィルタを実行します。

サンプル

フィルタを使用していない状態
画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90">

☆★文字★☆

<div style="font: bold 170% sans-serif; width: 100%;">
☆★文字★☆
</div>

《bodyに直接書いた場合》

複数の指定をした場合
画像

<div style="width: 100%;
filter: progid:dximagetransform.microsoft.
basicimage(rotation=2, opacity=0.5,);
"
>
<img src="../img/sample.jpg" alt="画像" width="120" height="90">
</div>

☆★文字★☆

<div style="font: bold 170% sans-serif; color: blue;
width: 100%; text-align: right;
filter: progid:dximagetransform.microsoft.
basicimage(mirror=1, invert=1);
"
>
☆★文字★☆
</div>


Copyright c 2007.10.01 luc All rights reserved.