如何使用CSS覆盖HTML图像

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

这是仅使用 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 的回答投赞成票。

Answer 3

使用您的“用户脚本”更改“src”属性值。

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

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

如果没有身份证：

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="https://i.stack.imgur.com/eu757.png" />
<img src="https://i.stack.imgur.com/IPB9t.png" />
<img src="https://i.stack.imgur.com/IPB9t.png" />
<script language="javascript">
    setTimeout("ChangeImageSrc('https://i.stack.imgur.com/eu757.png', 'https://i.stack.imgur.com/IPB9t.png')", 5000);
</script>

预览：

第一张图像将在 5 秒后被替换。尝试现场演示。