使用 css 替换图像（在 <img /> 标签中）答案

【问题标题】：Replacing an image (in an <img /> tag) using css使用 css 替换图像（在 <img /> 标签中）
【发布时间】：2012-08-21 23:09:36
【问题描述】：

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

但这似乎不正确？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

然后在 CSS 中：

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

然后您可以使用媒体查询重新设置 div 的样式。

【讨论】：

【解决方案3】：

您的代码不起作用，因为原始 <img> 标记中的图像是前景图像，与背景图像不同。

所以设置 CSS 并不会摆脱原始图像。此外，虽然 CSS 确实有效，但它显示的背景图像显示在前景图像的后面。

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

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

【讨论】：

【解决方案4】：

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

无论如何，如果从语义的角度来看，这两个图像都与上下文相关，则不应使用 css 将第二个图像放置在第一个位置

【讨论】：

【解决方案5】：

如果您将背景放在图像上，图像只会与背景重叠；使背景完全不可见。

解决方法是让图片作为元素的背景

【讨论】：