17

我正在尝试用 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.*/
}
4

9 回答 9

28

您可以使用 ：

content: url("/_layouts/images/GEARS_AN.GIF")
于 2013-11-10T17:56:53.103 回答
18

还有另一种方法可以解决这个问题：使用 CSS box-sizing。

HTML：

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

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

http://css-tricks.com/replace-the-image-in-an-img-with-css/

于 2014-07-08T13:53:38.410 回答
5

你可以试试这样的

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

或者

<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')
}
于 2013-07-17T17:06:07.230 回答
4

您可以使用 CSS a) 通过将原始图像的宽度和高度设置为 0 或将其移出屏幕等来使原始图像不可见，并且 b) 在其 ::before 或 ::after 伪元素中插入一个新图像。

但这会影响性能，因为浏览器会同时加载原始图像和新图像。但它不需要Javascript！

于 2013-07-17T18:42:57.050 回答
3

您src不能通过 CSS 设置图像属性。你可以得到 is，就好像你想设置 usebackground或background-image.

于 2013-07-17T16:56:07.957 回答
2

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

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

于 2013-07-17T16:55:40.603 回答
1

你可以混合使用 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";
}

然后你使用 CSS 来修改你喜欢的 img 标签或 id。

于 2013-07-17T18:10:54.650 回答
0

您可以将图像设置为完全透明的图像，然后像这样更改背景图像：

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

图像确实必须是相同的大小。：（ 希望这可以帮助！

于 2018-04-18T20:03:49.743 回答
0

content:url('imagelinkhere');

这是有效的，我测试过

于 2019-10-03T01:16:18.903 回答