html - 用 CSS IMG 替换 HTML IMG？

Question

我正在修改网站，但只有更改 CSS 的权限。我需要更改的大部分元素都已正确标记为 id 或类，但少数地方在 img 标记内列出了 id 或类。

我想仅使用 css 替换 img 标签中的该图像。有没有办法做到这一点？即，隐藏 src img 并只显示我的 css 引用图像？

Answer 1

抱歉这么晚发帖(我知道差不多一年了..)，但我有同样的问题做梦，我们网站上使用的一些 html 是从外部调用的，因此编辑 html 对我来说也不是一个选择。这是我解决问题的方法...仅使用 CSS。

如果有 Firebug，请使用它。现在在 HTML 中查找您要替换的图像。 (firebug 将显示元素的 id 和类)

您的 HTML 应该看起来像这样才能正常工作。 (在 span 元素内有一个 img src 元素)

    <span class="Dreamlings_ClassA Dreamlings_ClassB">
    <img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
    <span>[This is just an extra span!] </span>
    </span>

现在是 CSS :)

在css中按类调出第一个元素。 (在编辑时使用最后一个类名更具体 [如果您有多个具有相同第一类名称的 span 元素])

    <span class="Dreamlings_ClassB">

应该看起来像这样..

span.Dreamlings_ClassB {
    background-image: url('../dreamlingsnewpic.png') !important; 
}

并在 img src 元素中隐藏讨厌的图像..

span.Dreamlings_ClassA img {
    display: none !important;
}

就是这样! :)

附注我在我的 css 中使用 !important 标签来覆盖其他外部样式表。但是如果你的 CSS 没有它们也能工作，你就不必使用这些标签。 (你只需要在带有 id 和类的 css 中更加具体)

希望这对您有所帮助!

-托尼