ホームページ作成について（画像に影をつけるfilterに関すること）

解決済

質問者：Hypocrite_k
質問日時：2006/04/06 15:55
回答数：3件

画像に立体感とでも言いましょうか、影をつけたいのですが、つけられません！

自分で調べた結果・・・

<img src="画像のパス" alt="画像の紹介文"style="filter:dropshadow(offx=5, offy=5, positive=1)">

これで画像に影がつけられる！と色々なサイトに書いてあるのですが、影がつきません・・・。

ちなみにパソコン環境は市販の電気屋さんで売ってるノートパソコンとでも思ってください。（Windows）

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： BLUEPIXY
回答日時：2006/04/06 20:54

フィルターの効果は、エレメントの範囲で描かれるので、

この場合効果が付かないのは、画像のエレメントに直接指定しているからです。
<div style="width:400;height:500;filter:DropShadow(offx=5, offy=5, positive=1)">
<img src="img/image.jpg" alt="代替文">
</div>
のように、例えばDIV で囲ってやって表示ができる範囲(DIV でのwidthとheight)を画像より若干多めに確保してやります。
また、
<img src="img/00.jpg" width="302" height="492" alt="画像" style="FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#0C0C0C,strength=5)">
のようにしてやれば、そのようにしなくても、直接影（この場合はドロップではないけど）を付けられます。
既に指摘されているように、filterスタイルは、ＩＥ独自のものであるということに注意して下さい。
ドロップシャドウのような効果の場合
filterを使わなくても
<img src="img/imame.jpg" width="302" height="492" style="position:absolute;top:0px;left:0px;z-index:99">
<div style="position:absolute;top:10px;left:10px;width:302px;height:492px;background-color:black;z-index:0"></div>
のように同じ幅のDIV を塗りつぶしてちょっとずらした位置に置いてやることで表現できると思います。

- 0
- 件

通報する

No.2

回答者： noname#19206
回答日時：2006/04/06 17:38

もっと詳しい説明をお願いします。

ソースをある程度載せていただけると分かるかもしれません。

ちなみにfilterはIEの独自拡張なのでIEでしか動作しません。
あまりむやみやたらと使うべきではないCSSの１つです。

あとalt="画像の紹介文"とありますが、altは画像の紹介を行うものではなく、
画像が表示されなかったときかわにに表示させる文字を書くためのものです。
サイトによってはポップアップ用の要素として説明してあるところもあるでしょうが、それは間違いです。
http://www.mozilla.gr.jp/standards/webtips0024.h …