Javascript 如何使用CSS覆盖HTML图像

我有我当前的代码：

#content img[src="/img/test.gif"] { 
    background-image:url(dark-img.png) !important;
}

据我所知，

！重要的覆盖现有值

为什么这不覆盖当前的HTML图像呢？背景显示在HTML图像的后面

我希望它位于HTML图像的前面，这可以使用CSS或JS吗

编辑：为了它的价值，我制作了一个用户脚本来修改网站的现有风格。因此，我无法直接访问HTML图像。
您也必须将第一个图像作为背景图像。然后你可以覆盖它。您可以为站点创建一个“标准”css文件，每个用户都有自己的css文件，可以覆盖自己想要的内容。
当应用于图像时，
背景图像
属性指的是图像的背景图像（鼓轮…）。它将永远在图像后面

如果希望图像显示在图像前面，则必须使用两个图像，或另一个容器，其中包含覆盖第一个图像的背景图像

顺便说一句，依赖
是不好的做法！重要信息
用于覆盖。它也可能无效，因为1）它不能覆盖元素的样式属性中的声明，2）它只有在基于标记和当前CSS的情况下才能工作。在你的情况下，所有的气喘吁吁和
！重要信息
声明不会使图像执行它无法执行的操作。
使用“用户脚本”更改“src”属性值

如果有ID，您可以执行以下操作：

document.getElementById('TheImgId').src = 'yournewimagesrc';

如果没有ID：

var imgElements = document.getElementsByTagName('img');

重复执行
imgElements
。当其
src
值与您的条件匹配时，请使用您自己的值进行更改，不要中断

更新：

Javascript:

<script language="javascript">
    function ChangeImageSrc(oldSrc, newSrc) {
        var imgElements = document.getElementsByTagName('img');
        for (i = 0; i < imgElements.length; i++){
            if (imgElements[i].src == oldSrc){
                imgElements[i].src = newSrc;
                break;
            }
        }
    }
</script>


函数ChangeImageSrc（oldSrc、newSrc）{
var imgElements=document.getElementsByTagName（'img'）；
对于（i=0；i

HTML:


setTimeout（“ChangeImageSrc（'http://i.stack.imgur.com/eu757.png', 'http://i.stack.imgur.com/IPB9t.png')", 5000);

预览：


第一个图像将在5秒后被替换。试试
我同意这里的所有答案，只是想指出，IE等“浏览器”不喜欢使用img[src=“/img/test.gif]”作为选择图像的手段。它需要一个类或id。
标记中显示的图像位于元素的前景，而不是背景，因此在中设置背景图像不会覆盖图像；正如您所看到的，它将出现在主图像后面

您要做的是替换图像。以下是您的选择：


从具有背景图像的元素开始，而不是标记。然后在CSS中更改背景图像将替换它

从标记开始，但使用Javascript更改src属性。（这在CSS中无法实现，但在JS中非常简单）


编辑：

看到您在问题中的编辑，我建议选项2-使用Javascript更改src属性。这很简单；像这样的东西可以达到目的：

document.getElementById('myimgelement').src='/newgraphic.jpg';

您不需要javascript来替换图像！只要您可以通过CSS选择器识别图像，就可以使用CSS来完成这项工作

在这里看到解决方案了吗
CSS中图像的替换可以通过几种方式完成。
它们都有一些缺点（比如语义、seo、浏览器兼容性等等）

在这个链接9（nine！）中，以一种非常好的方式讨论了不同的技术：


如果你对css感兴趣：整个网站都值得一看。
我在另一个SO页面上回答了一个类似的问题



.鸡蛋{
宽度：100%；
身高：0；
填充：0 200px 0；
背景图片：url（linkToImage.jpg）；
背景尺寸：封面；
}

因此，有效地隐藏图像并填充背景。哦，这真是一个骇客，但是如果你想要一个有alt文本和一个不使用Javascript就可以扩展的背景，代码如下：




将图像大小设置为0x0
添加所需大小（150x200）的边框，然后
将图像用作要填充的背景图像

如果你对这个答案投赞成票，也要投反对票。
你应该可以通过以下方式来取代它：

.image {
    content: url('https://picsum.photos/seed/picsum/400');
    width: 200px;
    height: 200px;
}

不幸的是，它在Firefox中似乎不起作用：（
img

元素的图像不是“现有背景图像值”。背景图像和“正常”（前景、内容）图像是两个独立的东西，你不能用一个来覆盖另一个。错误的工具。你想用JS来做这件事。没有必要使用错误的工具。请看我的答案。是的，对不起-思考不清楚。我理解背景图像。有没有办法用Javascript覆盖它？（思考GM）。您完全可以使用Javascript覆盖它。只需获取对图像的引用（比如“myImage”），然后执行

myImage.src=“dark img.png”

或任何你想要的URL。我不能更改第一个图像，因为它是由网站所有者运行的-不是我。这是为了使用style修改网站。你完全失去了我，我几乎从未接触过JS，更不用说GM。

img

的

src

不是样式，不能用CSS覆盖。每个人都建议你使用Javascript。我理解bit、 该图像不包含ID，只是纯HTML，带有src=“image2.jpg”。我尝试了“如果没有ID”的方法，但它似乎与我尝试的方法不一样。我需要学习JS吗，然后再进一步学习这个mod？（需要通过JS完成2个图像，从外观上看）。你不需要javascript。请看我的回答。旧版本的IE不会喜欢它。但在IE8中应该可以。这种方法不需要

<img src="linkToImage.jpg" class="egg">

.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

<img src="tiger.jpg" 
     style="padding: 150px 200px 0px 0px; 
            background: url('butterfly.jpg'); 
            background-size:auto; 
            width:0px; 
            height: 0px;">

.image {
    content: url('https://picsum.photos/seed/picsum/400');
    width: 200px;
    height: 200px;
}