- ベストアンサー
ホームページ作成について（画像に影をつけるfilterに関すること）
画像に立体感とでも言いましょうか、影をつけたいのですが、つけられません！ 自分で調べた結果・・・ <img src="画像のパス" alt="画像の紹介文"style="filter:dropshadow(offx=5, offy=5, positive=1)"> これで画像に影がつけられる！と色々なサイトに書いてあるのですが、影がつきません・・・。 ちなみにパソコン環境は市販の電気屋さんで売ってるノートパソコンとでも思ってください。（Windows）
- Hypocrite_k
- お礼率8% (24/290)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
フィルターの効果は、エレメントの範囲で描かれるので、 この場合効果が付かないのは、画像のエレメントに直接指定しているからです。 <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 を塗りつぶしてちょっとずらした位置に置いてやることで表現できると思います。
その他の回答 (2)
もっと詳しい説明をお願いします。 ソースをある程度載せていただけると分かるかもしれません。 ちなみにfilterはIEの独自拡張なのでIEでしか動作しません。 あまりむやみやたらと使うべきではないCSSの１つです。 あとalt="画像の紹介文"とありますが、altは画像の紹介を行うものではなく、 画像が表示されなかったときかわにに表示させる文字を書くためのものです。 サイトによってはポップアップ用の要素として説明してあるところもあるでしょうが、それは間違いです。 http://www.mozilla.gr.jp/standards/webtips0024.html
- k-ayako
- ベストアンサー率39% (1225/3109)
ヘッダにスタイルシートの宣言はありますか？
補足
<head></head>間には何もありません！ 何を入れたらいいのでしょうか？