如何使用CSS覆盖HTML图像 [英] How to override HTML image using CSS

问题描述

我有我目前的代码：

  #content img [src =/ img / test.gif] {
 background-image：url（dark-img.png）！important; 
 
  

从我的理解！important; 覆盖现有的值？

为什么这不重写当前的HTML图像？后台显示后面 HTML图像。

我希望它在HTML图像的前面，是这可能使用CSS或JS？

编辑：为什么它的价值，即时制作一个脚本，将修改网站的现有风格。所以我没有直接访问HTML图像。

解决方案

使用'userscript'更改'src'属性值。

如果有ID，您可以这样做：

  document.getElementById（'TheImgId'）。src ='yournewimagesrc'; 
  

如果没有ID：

  var imgElements = document.getElementsByTagName（'img'）; 
  

迭代 imgElements 。当它的 src 值符合您的标准时，请用您自己的值更改该值，并确保中断。

更新：

Javascript：

 < script language =javascript> 
函数ChangeImageSrc（oldSrc，newSrc）{
 var imgElements = document.getElementsByTagName（'img'）; 
 for（i = 0; i< imgElements.length; i ++）{
 if（imgElements [i] .src == oldSrc）{
 imgElements [i] .src = newSrc; 
休息; 
} 
} 
} 
< / 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秒后更换。试试 实时演示 。

I have my current code:

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

From my understanding !important; overrides existing values?

Why isn't this overriding the current HTML image in place there? The background shows up, behind the HTML image.

I want it in front of the HTML image, is this possible using CSS or JS?

Edit: For what its worth, im making a userscript that will modify the existing style of the site. So I do not have direct access to the HTML image.

解决方案

Use your 'userscript' to change 'src' attribute value.

If there is an ID there, you can do this:

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

If there is no ID:

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

Do iteration of imgElements. When its src value is match with your criteria, change the value with your own, do break.

Update:

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>

Preview:

The first image will be replaced after 5 secs. Try Live Demo.

这篇关于如何使用CSS覆盖HTML图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！