1

img タグに背景画像を設定しようとしています。これは可能ですか？

私のHTML：

<div id="content">
<img src="my-image.jpg" alt="image" class="img-shadow">
</div>

私のCSS：

#content img {
    float:right;
    margin:0 0 15px 15px;
    border:4px solid #ffffff;
}
.img-shadow {
    background-image:url('img-shadow.png');
    background-repeat:no-repeat;
    background-position:0 232px;
}

Chrome の「Inspect Element」を使用すると、背景へのパスが正しいことがわかります。ブラウザに表示されないだけです。以下は、私が目指している望ましい効果です。ところで。前景画像のサイズは 258x258 (枠あり) で、背景画像のサイズは 258x40 です。

ここに画像の説明を入力

4

5 に答える 5

2

コンテナ要素と CSS を使用したソリューションを次に示します。:after

デモフィドル

HTML

<div id="content">
    <div class="img-container">
        <img src="http://placehold.it/258x258" alt="image" class="img-shadow" />
    </div>
</div>

CSS

#content img {
    border:4px solid #ffffff;
    vertical-align: top;
}
.img-container{
    position: relative;
    display:inline-block;
}
.img-container:after {
    content: url('http://placehold.it/258x40');
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
}

アップデート

そしてCSS3を使ってbox-shadow

デモフィドル

.img-container:after {
    content: '';
    display: block;
    position: absolute;
    top: 90%;
    right: 0;
    height: 20px;
    width: 258px;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    z-index: -1;
}
于 2013-08-01T19:27:56.137 に答える
0

うん。padding背景画像が透けて見えるように設定してください。デモ: http://jsfiddle.net/jalbertbowdenii/p6fm4/1/

すべてのパディングを削除してフィドルを更新しました。希望の「ピーク」効果を得るには、少しのパディングで覗いている2つのコーナーを設定し、他のコーナーを0に設定します。

于 2013-08-01T17:46:19.563 に答える