Question

我有以下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;
}

但这似乎不正确？

Answer 1

如果您使用的是CSS3，那么content就是答案：

.A img
{
    content: url("image2.png");
}

Answer 2

你不能在CSS中修改它，而是使用这样的div：

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

然后在CSS中：

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

然后你可以使用媒体查询重新设置div。

Answer 3

您的代码无效，因为原始<img>标记中的图片是前景图片，与背景图片不同。

因此设置CSS并没有摆脱原始图像。此外，尽管CSS确实有效，但它显示的背景图像显示在前景图像后面。

为了做到这一点，你需要将原始图像作为背景图像（即使用CSS background-image属性设置），或者切换到替换脚本中的前景图像。这将涉及设置src属性：

$('.a img').attr('src','newimage.png');

Answer 4

您要设置一个您无法看到的img元素的背景，因为其src属性中定义的图片覆盖了它

无论如何，如果两个图像都从语义的角度来看与上下文相关，那么你不应该使用css来放置第二个图像来代替第一个图像

Answer 5

如果在图像上放置背景，图像将简单地与背景重叠;使背景完全不可见。

解决方案是将图像作为元素的背景