是否可以使用 css 更改 img src 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17705768/
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
Is it possible to change img src attribute using css?
提问by qadenza
I'm trying to change img src (not the background img src) with css
我正在尝试用 css 更改 img src（而不是背景 img src）
<img id="btnUp" src="img/btnUp.png" alt="btnUp"/>
#btnUp{
cursor:pointer;
}
#btnUp:hover{
src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/
}
采纳答案by Diodeus - James MacFarlane
No - CSS can only be used to change CSS background images, not HTML content.
否 - CSS 只能用于更改 CSS 背景图像，不能用于更改 HTML 内容。
In general UI elements (not content) should be rendered using CSS backgrounds anyway. Swapping classes can swap background images.
一般来说，无论如何都应该使用 CSS 背景呈现 UI 元素（不是内容）。交换类可以交换背景图像。
回答by gjgsoftware.com
You can use :
您可以使用 ：
content: url("/_layouts/images/GEARS_AN.GIF")
回答by Ben Tayaa
There is another way to fix this : using CSS box-sizing.
还有另一种方法可以解决这个问题：使用 CSS box-sizing。
HTML :
HTML :
<img class="banner" src="http://domaine.com/banner.png">
CSS :
CSS :
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://domain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
回答by Mr Lister
You can use CSS to a) make the original image invisible by setting its width and height to 0, or moving it off-screen etc, and b) insert a new image in its ::before or ::after pseudo-element.
您可以使用 CSS 来 a) 通过将原始图像的宽度和高度设置为 0 或将其移出屏幕等来使原始图像不可见，以及 b) 在其 ::before 或 ::after 伪元素中插入新图像。
That will be a performance hit though, as the browser will then load both the original and the new image. But it won't require Javascript!
不过，这会影响性能，因为浏览器将同时加载原始图像和新图像。但它不需要Javascript！
回答by Dhaval Marthak
You can't set the image srcattribute via CSS. you can get is, as if you wanted to set use backgroundor background-image.
您src不能通过 CSS设置图像属性。你可以得到 is，就好像你想设置 usebackground或background-image。
回答by daniel__
you could try something like this
你可以试试这样的
<img id="btnUp" src="empty.png" alt="btnUp" />
or
或者
<div id="btnUp" title="btnUp"> <div/>
#btnUp{
cursor:pointer;
width:50px;
height:50px;
float:left;
}
#btnUp{
background-image:url('x.png')
}
#btnUp:hover{
background-image:url('y.png')
}
回答by Patrick
You can use a mixture of JavaScript and CSS to achieve this, but you can not do this with CSS alone. <img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" />Instead of img you would put file name sans file type.
您可以混合使用 JavaScript 和 CSS 来实现这一点，但单独使用 CSS 无法做到这一点。<img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" />而不是 img 你会放文件名sans文件类型。
function change(img){
document.getElementById("btnUp").src= img + ".png";
}
function changeback(img){
document.getElementById("btnUp").src= img + ".png";
}
Then you use CSS to modify the img tag or the id to your liking.
然后你使用 CSS 来修改你喜欢的 img 标签或 id。
回答by CookiePanda
You could set the image to a completely transparent image, then change the background image like so:
您可以将图像设置为完全透明的图像，然后像这样更改背景图像：
img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}
The images do have to be the same size though. :( Hope this helps!
虽然图像必须是相同的大小。：（ 希望这可以帮助！
回答by Raffy Ponce
content:url('imagelinkhere');
content:url('imagelinkhere');
This is working, I tested it
这是有效的，我测试过
