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

Posted 2023-03-05

【中文标题】使用 css 替换图像（在 <img /> 标签中）

【英文标题】：Replacing an image (in an <img /> tag) using css

【发布时间】：2012-08-21 23:09:36

【问题描述】：

我有以下html：

<div class="A">
    <img src="image1.png"  /> 
</div>

在我的媒体查询 css 样式表中，我想用另一张图片 (image2.png) 替换该图片。

我需要写什么css代码？

我尝试了以下方法：

.A img

   background:url("image2.png") no-repeat;

但这似乎不正确？

【问题讨论】：

这与javascript无关，更不用说javascript库jQuery了！

stackowerflow 上有十几个相同的问题：link1, link2, ...

【参考方案1】：

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

.A img

    content: url("image2.png");

【讨论】：

我从未在 img 上使用过内容，也不知道它是否有效。谢谢@michal-klouda，我今天学到了一些新东西。这是一个非常优雅的解决方案。

【参考方案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】：

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

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

像这样：http://jsfiddle.net/PabXF/