将HTML IMG替换为CSS IMG

Question

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

我想只使用css替换img标签中的图像。有办法做到这一点吗?也就是说，隐藏SRC和只有我的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中使用重要标签来覆盖其他外部样式表。但是如果你的CSS没有标签也能工作，你就不必使用标签了。(你只需要在CSS中更具体地使用id和类)

希望有帮助!

托尼

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>

正如其他人所说，这真的不是一个好的做法，但它是有效的。

Answer 3

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

据我所知没有。图像的src属性不能从CSS中更改。

我也想不出一个解决这个问题的方法，甚至不是一个非常笨拙的方法。当然，您可以将background-image分配给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 */
}

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