logo标签列表

如何使用CSS覆盖HTML图像

javascripthtmlcss
11

以下是我的现有代码：

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

据我所知，!important; 能够覆盖已有的值？

为什么这不会覆盖当前显示的 HTML 图像呢？背景出现了，但是在 HTML 图像后面。

我想让它出现在 HTML 图像前面，这是否可以使用 CSS 或 JS 实现？

编辑：就此而言，我正在制作一个用户脚本来修改网站的现有样式。因此，我无法直接访问 HTML 图像。

3
一个img元素的图片不是“已存在的背景图像值”。背景图像和“正常”的（前景、内容）图像是两个独立的东西，你不能使用其中一个来覆盖另一个。 - RoToRa
1
错误的工具。你需要使用JS来完成这个任务。 - DA.
1
不一定是错误的工具。看看我的回答。 - Rob Audenaerde
10个回答
13
1
天才...有些人在没有访问js或html的地方进行调整（例如Dynamics中的VOC模板），这是使用纯css完成此操作的惊人方法... - Egli Becerra
@EgliBecerra 这也可以通过使用 userChrome.css 在 Firefox 中更改特定选项卡的网站图标！这个解决方案真是匪夷所思！ - ScienceDiscoverer
11

这是仅使用 CSS 的代码：

<img src="tiger.jpg" 
     style="padding: 150px 200px 0px 0px; 
            background: url('butterfly.jpg'); 
            background-size:auto; 
            width:0px; 
            height: 0px;">
  • 将图像大小设置为0x0，
  • 添加所需尺寸的边框（150x200），并且
  • 使用您的图像作为background-image填充。

如果您赞同此答案，请也给@RobAu的回答点个赞。

2
这种方法需要一个已知/固定大小的图像吗？ - rainabba
1
@rainabba：你固定了空间的大小。如果背景图片更大，它就会被裁剪。如果它更小，它就会被平铺。 - serv-inc
2

我曾在另一个SO页面上回答过类似的问题。

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

这篇文章介绍了如何在CSS中覆盖图片的src属性。
<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的情况下缩放背景的图像？

2
在CSS中替换图像可以通过多种方式实现。每种方式都有一些缺点（如语义、SEO、浏览器兼容性等）。在这个链接中，讨论了9种不同的技术：http://css-tricks.com/css-image-replacement/。如果你对CSS有兴趣，整个网站都值得一看。
2
background-image属性是用来设置背景图片的，它会被放置在图片的后面。如果想要让图片出现在前面，需要使用两张图片或者另一个带有覆盖第一张图片的背景图片的容器。
另外，过度依赖!important来覆盖样式是不好的做法。这种方法可能无效，因为1）它无法覆盖元素样式属性中的声明，2）它只在当前CSS和标记允许时起作用。在你的情况下，使用大量的!important声明也无法让图片做出无法实现的动作。请注意保留HTML标签。
是的，抱歉 - 我没有想清楚。我明白这是背景图片。我能用JavaScript覆盖它吗？（考虑GM）。 - Dean
1
你绝对可以用JavaScript进行覆盖。只需获取图像的引用（假设为“myImage”），然后执行myImage.src =“dark-img.png”或任何您想要的URL即可。 - Robusto
1
使用您的“用户脚本”更改“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>

预览:

alt text

第一张图片将在5秒后被替换。请尝试实时演示。

你完全把我弄糊涂了，我几乎没有接触过JS，更不用说GM了。 - Dean
img 的 src 不是样式，不能用 CSS 覆盖。大家建议您使用 JavaScript。 - Jeaf Gilbert
我理解那一部分。这张图片没有ID，它只是纯HTML，带有src="image2.jpg"。我尝试了'如果没有ID'的方法，但从我尝试的情况来看似乎不起作用。在继续进行此修改之前，我需要学习JS吗？（看起来需要通过JS完成2张图片的操作）。 - Dean
你不需要 JavaScript。请看我的回答。 - Rob Audenaerde
0
你应该能够通过像这样做来替换它：
.image {
    content: url('https://picsum.photos/seed/picsum/400');
    width: 200px;
    height: 200px;
}

很遗憾，似乎在Firefox中不起作用 :(

0

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

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

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

  • 从标记开始，但使用 Javascript 更改 src 属性。（这不能在 CSS 中完成，但在 JS 中非常简单）

编辑：

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

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

你需要将第一张图片也作为背景图像放置。然后你可以覆盖它。你可以在网站的“标准”CSS文件中进行设置，每个用户都有自己的文件，在其中可以覆盖他想要的内容。

我无法更改第一张图片，因为它是由网站所有者运行的，而不是我。可以使用Stylish修改网站。 - Dean
0

我同意这里所有的答案，只是想指出“浏览器”如IE不喜欢使用img[src="/img/test.gif"]来选择图像。它需要一个类或ID。

旧版本的IE不会喜欢它。但在IE8中应该没问题。 - Spudley
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接