7

私は次のhtmlを持っています：

<div class="A">
    <img src="image1.png" width="100px" height="100px"/> 
</div>

メディアクエリのcssスタイルシートで、その画像を別の画像（image2.png）に置き換えたいと思います。

私が書く必要があるcssコードは何ですか？

私は次のことを試しました：

.A img
{
   background:url("image2.png") no-repeat;
}

しかし、これは正しくないようですか？

4

5 に答える 5

14

CSS3を使用している場合content、答えは次のとおりです。

.A img
{
    content: url("image2.png");
}
于 2012-08-27T12:57:49.907 に答える
3

CSSでこれを変更することはできません。代わりに、次のようなdivを使用してください。

<div id='#theImage'></div>

次にCSSで：

#theImage {
    width:100px;
    height:100px;
    background:url("image1.png") no-repeat;
}

次に、メディアクエリを使用してdivのスタイルを変更できます。

于 2012-08-27T12:55:44.847 に答える
3

<img>元のタグの画像が前景画像であり、背景画像とは異なるため、コードは機能しません。

したがって、CSSを設定しても、元の画像は削除されません。さらに、CSSは機能しますが、CSSが表示する背景画像は前景画像の後ろに表示されます。

これを行うには、元の画像を背景画像として使用するか（つまり、CSSbackground-imageプロパティを使用して設定する）、スクリプトで前景画像を置き換えるように切り替える必要があります。これには、src属性の設定が含まれます。

$('.a img').attr('src','newimage.png');
于 2012-08-27T12:56:43.573 に答える
1

属性で定義された画像が要素を覆っているimgため、表示できない要素の背景を設定していますsrc

とにかく、両方の画像がセマンティックの観点からコンテキストに関連している場合は、cssを使用して最初の画像の代わりに2番目の画像を配置しないでください。

于 2012-08-27T12:56:35.380 に答える
0

画像に背景を配置すると、画像は単に背景と重なります。背景を完全に見えなくします。

解決策は、要素の背景として画像を作成することです

そのように：http：//jsfiddle.net/PabXF/

于 2012-08-27T13:03:44.453 に答える