Question

我有我目前的代码：

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

根据我的理解!important;会覆盖现有值吗？

为什么不覆盖当前的HTML图像呢？背景显示，背后 HTML图像。

我想要HTML图像的在前面，这可能是使用CSS还是JS？

编辑：为了它的价值，我制作一个将修改网站现有风格的用户脚本。所以我无法直接访问HTML图像。

Answer 1

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

请在此处查看解决方案 http://www.audenaerde.org/csstricks.html#imagereplacecss

Answer 2

background-image属性应用于图像时，指的是（鼓滚...）图像的背景图像。它总是在图像背后。

如果您希望图像显示在图像的前中，则必须使用两个图像，或另一个带有覆盖第一个图像的背景图像的容器。

顺便说一句，依靠!important覆盖是不好的做法。它也可能是无效的，因为1）它不能覆盖元素的样式属性中的声明，2）它只有在能基于标记和当前CSS工作时才有效。在您的情况下，所有的喘气和喘气以及!important声明都不会使图像做一些它不能做的事情。

Answer 3

CSS中的图像替换可以通过多种方式完成。它们中的每一个都有一些缺点（如语义，seo，浏览器兼容性......）

在此链接9（九！）上，我们以非常好的方式讨论了不同的技术：

http://css-tricks.com/css-image-replacement/

如果您对css感兴趣：整个网站值得一看。

Answer 4

使用'usercript'更改'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>

HTML：

<img src="http://i.stack.imgur.com/eu757.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<script language="javascript">
    setTimeout("ChangeImageSrc('http://i.stack.imgur.com/eu757.png', 'http://i.stack.imgur.com/IPB9t.png')", 5000);
</script>

预览：

第一张图片将在5秒后更换。试试 Live Demo 。

Answer 5

以下是代码using only css：

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

将图像大小设置为0x0，
添加所需大小的边框（150x200）和
使用您的图片作为背景图片来填充。

如果你赞成这个答案，也可以给@RobAu's answer一个upvote。

Answer 6

您还必须将第一张图片作为背景图片放置。然后你可以覆盖它。你可以在网站的“标准”css文件中做，每个用户都有自己的，可以覆盖他想要的东西。

Answer 7

我同意这里的所有答案，只是想到id指出IE之类的'浏览器'不会喜欢img [src =“/ img / test.gif”]作为选择图像的方法。它需要一个类或id。

Answer 8

标签中显示的图像位于元素的前景，而不是背景，因此设置背景图像不会覆盖图像;正如你所看到的，它只会出现在主图像的后面。

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

从带有背景图片的元素开始，而不是标记。然后在CSS中更改背景图像将替换它。
从标记开始，但使用Javascript更改src属性。（这不能在CSS中完成，但在JS中很简单）

编辑：

在问题中看到您的编辑，我建议选项2 - 使用Javascript来更改src属性。这很简单;这样的事情可以解决问题：

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

Answer 9

我在另一个SO页面回答了类似的问题..

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

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

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

有效地隐藏图像并填充背景。哦，什么是黑客，但如果你想要一个alt文本和背景，可以不使用Javascript进行扩展？

Answer 10

您应该可以通过执行以下操作来替换它：

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

不幸的是，它似乎在 Firefox 中不起作用:(

如何使用CSS覆盖HTML图像

10 个答案: