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

我想用css来改变IMG SRC（不是背景IMG SRC）是否可以使用css更改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.*/ 
}

来源

2013-07-17 bonaca

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

总而言之，UI元素（不是内容）应该使用CSS背景渲染。交换类可以交换背景图像。

来源

2013-07-17 16:55:40

感谢。解决:) – bonaca

+14

错误 - 你可以很容易地做到这一点与CSS3和'content'属性，请看这里：http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img -tag-in-css＃answer-11484688 – Timo

更新：内容属性仅适用于Webkit/Chrome - 不适用于FF或IE。 – Timo

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

来源

2013-07-17 16:56:07

你可以尝试这样的事情

<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-17 17:06:07

您可以使用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-17 18:10:54 Patrick

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

尽管如此，浏览器将会加载原始图像和新图像，但这会带来性能。但它不会需要Javascript！

来源

2013-07-17 18:42:57

您可以使用：

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

来源

2013-11-10 17:56:53

为什么downvote？这是正确的答案。 – Timo

更新：似乎这只适用于webkit/Chrome，但不适用于FF或IE。 – Timo

这不适用于Firefox –

还有另一种方式来解决这个问题：使用CSS盒子大小。

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-08 13:53:38

这对我来说很方便 – RozzA

欢迎你的家伙:) –

是的，这是解决方案 –

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

回答

相关问题