Question

我正在重新设计网站，但只有权更改CSS。我需要更改的大多数元素都被正确标记为id或类，但是一些地方在img标记中列出了id或类。

我想只使用css替换img标签中的图像。有没有办法做到这一点？即，隐藏src img并且只有我的css参考图像可见？

Answer 1

对不起这么晚的帖子，（差不多一年，我知道..），但我有同样的问题 Dreamling ，我们网站上使用的一些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;
}

就是这样！：）

P.S。我在我的css中使用！important标签来覆盖其他外部样式表。但如果你的css在没有它们的情况下工作，你不必使用这些标签。（你只需要在具有id和类的css中更具体）

希望这有帮助！

托尼

Answer 2

如果你的图片标签在一个容器内，那么就是一个块，然后使用它：

<style>

#container {
   background: url('image.png') no-repeat;
   text-indent: -9999;
}

</style>
<div id="container">
    <img src="image.png" alt="image to be replaced" />
</div>

正如其他人所说，这真的不是一种好的做法，但它确实有效。仅在Chrome中测试过。

Answer 3

我想仅使用css替换img标签中的图像。

不是我知道，不是。无法从CSS更改图像的src属性。

我也想不到要做到这一点的解决方法，甚至连一个非常糟糕的问题。您当然可以为图像元素分配background-image，但实际图像将始终位于其前面，

您必须更改原始HTML，以便原始按钮是具有<button>属性的background-image元素 - 您可以使用CSS覆盖。

Answer 4

限制访问HTML但允许访问编辑CSS是一种奇怪的做法。这两个元素齐头并进，以生成页面。

无论如何，您可以尝试删除或更改“btn_next.png”的名称，以便在从“src”调用时不显示它并使CSS如下：

#btn_next {
   background: url('image.png') no-repeat;
   display:block;
   width:150px; /* for example */
   height:30px; /* for example */
}

如果这不起作用，唯一的另一种方法是隐藏输入按钮并用背景图像替换li行，但该按钮将停止工作。除非您可以访问已包含的javascript文件，否则您可以查看其他解决方案。

用CSS IMG替换HTML IMG？

4 个答案: