html - 使用 css替换图像（在标签中）

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;
}

但这似乎不正确？

score 14 · Accepted Answer

14

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

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

于 2012-08-27T12:57:49.907 回答

score 3 · Accepted Answer

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

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

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

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

score 3 · Accepted Answer

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

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

然后在 CSS 中：

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

5 回答 5