Question

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

Answer 1

您可以使用：

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

Answer 2

还有另一种解决方法：使用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/

Answer 3

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

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

Answer 4

您无法通过CSS设置图片src属性。你可以得到，好像你想设置使用background或background-image。

Answer 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')
}

Answer 6

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

一般来说，UI元素（不是内容）应该使用CSS背景渲染。交换类可以交换背景图像。

Answer 7

您可以使用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。

Answer 8

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

with tbl(str) as (
  select '/abc/required_string/2/' from dual union all
  select '//required_string1/3/' from dual
)
select  regexp_substr(str, '(.*?)(/)', 1, 2, null, 1)
from    tbl;

但是图像必须具有相同的尺寸。 :( 希望这有帮助！

Answer 9

content:url('imagelinkhere');

这是正常的，我已经测试过

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

9 个答案: