Javascript 如何使用 CSS 覆盖 HTML 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3779866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override HTML image using CSS
提问by Dean
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?
根据我的理解!important;覆盖现有值？
Why isn't this overriding the current HTML image in place there? The background shows up, behindthe HTML image.
为什么这不覆盖当前的 HTML 图像？背景显示在 HTML 图像后面。
I want it in frontof the HTML image, is this possible using CSS or JS?
我想要它在HTML 图像前面，这可以使用 CSS 或 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.
编辑：对于它的价值，我正在制作一个用户脚本来修改网站的现有样式。所以我无法直接访问 HTML 图像。
采纳答案by Jeaf Gilbert
Use your 'userscript' to change 'src' attribute value.
使用您的 'userscript' 更改 'src' 属性值。
If there is an ID there, you can do this:
如果那里有 ID，您可以这样做：
document.getElementById('TheImgId').src = 'yournewimagesrc';
If there is no ID:
如果没有身：
var imgElements = document.getElementsByTagName('img');
Do iteration of imgElements. When its srcvalue is match with your criteria, change the value with your own, do break.
进行迭代imgElements。当它的src值符合你的标准时，用你自己的值改变它，不要打破。
Update:
更新：
Javascript:
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:
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.
第一个图像将在 5 秒后被替换。尝试现场演示。
回答by RobAu
You don't need javascript for image replacement! As long as you can identify the image by a CSS selector, you can use CSS to do the trick.
您不需要 javascript 来替换图像！只要您可以通过 CSS 选择器识别图像，就可以使用 CSS 来实现这一点。
See the solution here http://www.audenaerde.org/csstricks.html#imagereplacecss
在此处查看解决方案 http://www.audenaerde.org/csstricks.html#imagereplacecss
回答by serv-inc
Here is the code using only css:
这是仅使用 css的代码：
<img src="tiger.jpg"
style="padding: 150px 200px 0px 0px;
background: url('butterfly.jpg');
background-size:auto;
width:0px;
height: 0px;">
- sets the image size to 0x0,
- adds a border of the desired size (150x200), and
- uses your image as a background-image to fill.
- 将图像大小设置为 0x0，
- 添加所需大小 (150x200) 的边框，以及
- 使用您的图像作为背景图像来填充。
If you upvote this answer, give @RobAu's answeran upvote, too.
如果您对这个答案投赞成票，也请对@RobAu 的回答投赞成票。
回答by Peter
The replacement of an image in CSS can be done in several ways. Each of them has some drawbacks (like semantics, seo, browsercompatibility,...)
可以通过多种方式替换 CSS 中的图像。它们中的每一个都有一些缺点（如语义、seo、浏览器兼容性……）
On this link 9 (nine!) different techniques are discussed in a very good way :
在此链接上，以非常好的方式讨论了9（九个！）不同的技术：
http://css-tricks.com/css-image-replacement/
http://css-tricks.com/css-image-replacement/
If you are interested in css in general : the whole site is worth a look.
如果您对一般的 css 感兴趣：整个站点都值得一看。
回答by Robusto
The background-imageproperty, when applied to an image, refers to (drum roll ... ) the background-image of the image. It will always be behind the image.
background-image当应用于图像时，该属性是指（鼓卷...）图像的背景图像。它永远在图像的后面。
If you want the image to appear in frontof the image, you are going to have to use two images, or another container with a background-image that covers the first image.
如果你想让图像出现在图像的前面，你将不得不使用两个图像，或者另一个带有覆盖第一张图像的背景图像的容器。
BTW, it is bad practice to rely on !importantfor overriding. It can also be ineffective since 1) it can't override declarations in an element's style attribute, and 2) it only works if it canwork based on the markup and the current CSS. In your case, all the huffing and puffing and !importantdeclarations won't make an image do something it can't do.
顺便说一句，依靠!important覆盖是不好的做法。它也可能是无效的，因为 1) 它不能覆盖元素样式属性中的声明，并且 2) 只有当它可以基于标记和当前 CSS 工作时才有效。在您的情况下，所有的怒气冲冲和!important声明都不会使图像做它不能做的事情。
回答by Alex B
i agree with all the answers here, just thought id point out that 'browsers' such as IE won't like the img[src="/img/test.gif"] as a means of selecting the image. it would need a class or id.
我同意这里的所有答案，只是想 id 指出 IE 等“浏览器”不会喜欢 img[src="/img/test.gif"] 作为选择图像的方式。它需要一个类或 id。
回答by Spudley
The images shown in tags are in the foreground of the element, not the background, so setting a background image in an won't override the image; it'll just appear behind the main image, as you're seeing.
标签中显示的图像位于元素的前景中，而不是背景中，因此在 a 中设置背景图像不会覆盖图像；正如您所看到的，它只会出现在主图像的后面。
What you want to do is replace the image. Here's your options:
您要做的是替换图像。以下是您的选择：
Start with an element with a background image, not an tag. Then changing the background image in CSS will replace it.
Start with an tag, but use Javascript to change the src attribute. (this can't be done in CSS, but is simple enough in JS)
从带有背景图像的元素开始，而不是标签。然后在 CSS 中更改背景图像将替换它。
从标记开始，但使用 Javascript 更改 src 属性。（这不能在 CSS 中完成，但在 JS 中足够简单）
EDIT:
编辑：
Seeing your edit in the question, I'd suggest option 2 - use Javascript to change the src attribute. It's quite simple; something like this would do the trick:
看到您在问题中的编辑，我建议选项 2 - 使用 Javascript 更改 src 属性。这很简单；像这样的事情可以解决问题：
document.getElementById('myimgelement').src='/newgraphic.jpg';
回答by Pocketninja
I answered a similar question in another SO page..
我在另一个 SO 页面中回答了类似的问题。
https://robau.wordpress.com/2012/04/20/override-image-src-in-css/
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;
}
So effectively hiding the image and padding down the background. Oh what a hack but if you want an with alt text and a background that can scale without using Javascript?
如此有效地隐藏图像并填充背景。哦，这是一个黑客，但如果你想要一个带有替代文字和一个可以在不使用 Javascript 的情况下缩放的背景？
回答by Tokk
you'll have to place the first image as a background-image too. Then you can override it. You could do in a "standard" css file for the site, and every user gets its own, where he can override what he wants.
您也必须将第一张图像作为背景图像放置。然后你可以覆盖它。您可以在站点的“标准”css 文件中进行操作，每个用户都有自己的，他可以在其中覆盖他想要的内容。
