こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

cssで、imgタグに、背景画像を敷きたい

cssで、imgタグに、背景画像(影)を敷く方法を教えてください。

※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。

■現状
<HTML>
<div id="hoge">
<img src~

<CSS>
#hoge img {
background-image:url(/images/background_shodow.jpg);
background-repeat: none;
background:position: ?
width:?
height:?
margin:?
padding:?;

<影の大きさ>
・width400px
・height200px

<写真のサイズ指定>
・width390px
・height190px

※これまでは、
写真のサイズが違うので、
css部分の#hoge img で、
画像の大きさを強制指定してました。

出来れば、
画像の大きさは、html側で指定せずに、
css側で調整したいです。

ムリなら、html側で大きさ指定します。

div枠にcss設定できれば早いかと思いますが、
それが出来ないため(img タグにしかcss指定不可)の相談です。

よろしくお願いします。

投稿日時 - 2011-02-20 15:00:16

QNo.6537212

暇なときに回答ください

質問者が選んだベストアンサー

普通にpaddingとbackgroundでできると思いますが、こう言うことではないのかな?
<style>
img {
padding: 0 10px 10px 0;
background-image: url(http://gazo.okwave.jp/okwave/images/logo/logo.jpg);
background-position: right bottom;
}
</style>
<img src="http://gazo.okwave.jp/okwave/images/logo/logo.jpg">
#画像やサイズは適宜変更してください。

投稿日時 - 2011-02-20 23:33:41

ANo.3

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

ieの対応がちょっと難しそうなんですが、borderで余白を確保してみてはどうでしょう?
border-colorはtransparentにして透明にすることで背景画像を表示できるようにします。

img{
border:5px solid transparent;
background:url(/images/background_shodow.jpg) no-repeat 0 0 transparent;
}

ただ、これだけだとちょっとIEの7以下と互換モードあたりで背景が上手く表示されない可能性が高いです。
haslayout周りやdisplayあたりを触っていけば上手くいくかもしれません。

投稿日時 - 2011-02-20 17:48:41

お礼

回答ありがとうございました。

投稿日時 - 2011-03-02 00:39:39

ANo.1

それはcss3のドロップシャドウかな?
http://www.google.com/search?hl=ja&q=css3%20%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%82%B7%E3%83%A3%E3%83%89%E3%82%A6

そうでないなら divに影のbackgroundを敷いてその中にimgを左上配置すればできるよ
枠じゃなくてbackgroundね

投稿日時 - 2011-02-20 15:05:18

補足

>それはcss3のドロップシャドウかな?
書いてませんでしたが、CSS2です。背景影画像は、こちらで用意します。

>divに影のbackgroundを敷いて
諸事情により、divが触れないため、imgタグで処理する方法はないでしょうか?
ムリっぽいとは思ってるのですが、
paddingとか、マイナス値処理とかして無理矢理にでも、ゴリ押しする方法を、
もしご存知の方がいれば、教えてください。

投稿日時 - 2011-02-20 15:22:25

あなたにオススメの質問