使用 CSS 将图像替换为另一个图像答案

【问题标题】：Replace image with another image using CSS使用 CSS 将图像替换为另一个图像
【发布时间】：2015-10-23 23:25:54
【问题描述】：

我们的一款软件使用第三方供应商来处理验证错误。我们目前正在更新 UI，并希望将当前显示的图像替换为我们自己的自定义图像。

我可以使用 CSS 定位图像，但当前图像仍显示在新图像上。

这是我的 HTML

<td >
<img src="warning.gif" border="0">
</td>

我的 CSS

td img {
    background-image: url("required.png")!important;
}

如何隐藏现有图像并仅使用 CSS 显示我的图像

【问题讨论】：

为什么不简单的改变html代码中的imagesource呢？
这适用于 CSS -> content: url("required.png")

标签： html css image hide

【解决方案1】：

尝试使用content:url("required.png")

完整的 CSS 代码：

td img {
    content: url("required.png");
}

【讨论】：

这段代码有问题：它在 FF 和 IE 中不起作用 -> stackoverflow.com/questions/12262118/… 你需要使用伪元素！检查@j08691 评论，它必须工作正常！

【解决方案2】：

<div class="header">
    <img class="banner" src="//notrealdomain1.com/banner.png">
</div>

/* All in one selector */
.banner {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
    width: 180px; /* Width of new image */
    height: 236px; /* Height of new image */
    padding-left: 180px; /* Equal to width of new image */
}

来源+额外说明： CSS Tricks

【讨论】：

【解决方案3】：

你可以使用:after伪元素：

td:hover::after {
    content:url(http://placehold.it/350x150/888/333);
}
td:hover > img {
    display:none;
}

<table>
    <tr>
        <td>
            <img src="http://placehold.it/350x150/333/888" border="0">
        </td>
    </tr>
</table>

【讨论】：