是否可以使用css更改img src属性？

我正在尝试用css更改imgsrc（而不是背景imgsrc）

<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.*/
}

#btnUp{
光标：指针；
}
#btnUp：悬停{
src:img/btnUpHover；/*这可能吗？这将是非常优雅的方式*/
}

否-CSS只能用于更改CSS背景图像，不能用于更改HTML内容

---

一般来说，UI元素（不是内容）无论如何都应该使用CSS背景呈现。交换类可以交换背景图像。

您不能通过CSS设置image

src

属性。您可以得到的是，如果您想设置使用

背景

或

背景图像

您可以尝试以下方法

<img id="btnUp" src="empty.png" alt="btnUp" />  

---

您可以混合使用JavaScript和CSS来实现这一点，但不能单独使用CSS<代码> 代替img，您将把文件名放在sans file type中

function change(img){
document.getElementById("btnUp").src= img + ".png";
}
function changeback(img){
document.getElementById("btnUp").src= img + ".png";
}

然后，您可以使用CSS根据自己的喜好修改img标记或id

您可以使用CSS a）通过将原始图像的宽度和高度设置为0或将其移出屏幕等方式使其不可见，以及b）在伪元素：：before或：：after中插入新图像

这将是一个性能上的打击，因为浏览器将加载原始图像和新图像。但它不需要Javascript

您可以使用：

content: url("/_layouts/images/GEARS_AN.GIF")

---

还有另一种解决方法：使用CSS框大小调整

HTML:

<img class="banner" src="http://domaine.com/banner.png">

---

您可以将图像设置为完全透明的图像，然后更改背景图像，如下所示：

img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}

但图像的大小必须相同：( 希望这有帮助！

内容：url（'imagelinkhere'）；

---

这是有效的，我测试了它

错误-你可以用CSS3和

内容

属性轻松做到这一点，请参见此处：更新：内容属性仅在Webkit/Chrome中有效-不在FF或IE中。CSS更好，请参见此处：详细信息：这是一个错误的答案。你可以使用CSS中的content属性设置图像，如@gjgsoftware所述.comOsify在他的第二个linkUpdate中给出了答案：似乎这只适用于webkit/Chrome，而不适用于FF或IE。2021更新：

内容：

现在在几乎所有浏览器中都得到了广泛支持。请参阅：@SamuelGfeller问题的上下文暗示了伪元素之外的适用性，即直接在浏览器上使用

内容一个
标记。您的链接仅适用于伪元素（如
：：before
和
：：after
）--Firefox仍然遵守标准，而Chrome没有。对！这是一个更相关的链接吗？顺便说一句，这里是
内容：
属性，用于与OPs问题类似的上下文。这对我来说很方便，可以提供帮助
<img class="banner" src="http://domaine.com/banner.png">

.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 */
}

img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}