ぼかしを入れる
ＩＥのフィルタ処理
画像やテキストに特殊効果を設定することができます。
Internet Explorer 4.0以上 と Internet Explorer 5.5以上 で表示可能なフィルタがあります。
Internet Explorer 4.0以上 と Internet Explorer 5.5以上 で表示可能なフィルタがあります。
９ ブレをつける
２ ぼかしを入れる
１０ 影を伸ばす
１１ ウェーブをかける
４ 影をおとす
１３ グレースケールで表示
１４ 色を反転させる
１５ X線フィルタをかける
８ マスクをかける
１６ グラデーションをかける
画像やテキストにぼかしを入れる
使うＨＴＭＬタグは
filter:progid:DXImageTransform.Microsoft.Blur(★) ＩＥ5.5以上対応
★は 次の値を指定します
pixelradius ぼかしの量 （ 0 ～ 100 ）
ぼかしの効果が表示される領域を指定します。
指定しない場合（デフォルト）の値は ２ です。
shadowopacity ぼかしの濃度 （ 0.0 ～ 1.0 ）
数値が大きくなるほどぼかしが強くなります。
0.0では透明になります。
指定しない場合（デフォルト）の値は 0.75 です。
複数の値を指定する場合は 半角のカンマ（ , ）で区切ります。
画像
と テキストに指定してみましょう
３行目へ指定したＨＴＭＬタグ
画像の例
枠線表示
<P style="width:200px;height:150px;border:1px blue solid;padding:20px;text-align:left;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5,shadowopacity=1.0);">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/223.jpg" width="150" height="100" alt="炎">
</P>
枠線非表示
<P style="width:200px;height:150px;padding:20px;text-align:left;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5,shadowopacity=1.0);">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/223.jpg" width="150" height="100" alt="炎">
</P>
テキストの例
枠線表示
<P style="width:200px;height:150px;border:1px blue solid;padding:20px;text-align:left;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5,shadowopacity=1.0);">
<font size="5">テキストに指定</font>
</P>
枠線非表示
<P style="width:200px;height:150px;padding:20px;text-align:left;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5,shadowopacity=1.0);">
<font size="5">テキストに指定</font>
</P>
使うＨＴＭＬタグは
filter:progid:DXImageTransform.Microsoft.Blur(★) ＩＥ5.5以上対応
★は 次の値を指定します
pixelradius ぼかしの量 （ 0 ～ 100 ）
ぼかしの効果が表示される領域を指定します。
指定しない場合（デフォルト）の値は ２ です。
shadowopacity ぼかしの濃度 （ 0.0 ～ 1.0 ）
数値が大きくなるほどぼかしが強くなります。
0.0では透明になります。
指定しない場合（デフォルト）の値は 0.75 です。
複数の値を指定する場合は 半角のカンマ（ , ）で区切ります。
画像
と テキストに指定してみましょう３行目へ指定したＨＴＭＬタグ
画像の例
枠線表示
<P style="width:200px;height:150px;border:1px blue solid;padding:20px;text-align:left;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5,shadowopacity=1.0);">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/223.jpg" width="150" height="100" alt="炎">
</P>
枠線非表示
<P style="width:200px;height:150px;padding:20px;text-align:left;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5,shadowopacity=1.0);">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/75/61/3347561/223.jpg" width="150" height="100" alt="炎">
</P>
テキストの例
枠線表示
<P style="width:200px;height:150px;border:1px blue solid;padding:20px;text-align:left;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5,shadowopacity=1.0);">
<font size="5">テキストに指定</font>
</P>
枠線非表示
<P style="width:200px;height:150px;padding:20px;text-align:left;filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5,shadowopacity=1.0);">
<font size="5">テキストに指定</font>
</P>
| 画像に指定 |
テキストに指定 |
|
|---|---|---|
|
無指定
上 枠線表示 下 枠線非表示 |
|
テキストに指定 テキストに指定 |
|
デフォルト
上 枠線表示 下 枠線非表示 |
|
テキストに指定 テキストに指定 |
|
pixelradius=5
shadowopacity=1.0 上 枠線表示 下 枠線非表示 |
|
テキストに指定 テキストに指定 |
|
pixelradius=0
shadowopacity=0.0 上 枠線表示 下 枠線非表示 |
|
テキストに指定 テキストに指定 |
© Rakuten Group, Inc.
