我想用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.*/
}
我想用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.*/
}
否 - CSS只能用於更改CSS背景圖片,而不是HTML內容。
總而言之,UI元素(不是內容)應該使用CSS背景渲染。交換類可以交換背景圖像。
您無法通過CSS設置圖像src
屬性。你可以得到的是,如果你想設置使用background
或background-image
。
你可以嘗試這樣的事情
<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')
}
您可以使用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到你的喜好。
您可以使用CSS來a)通過將其寬度和高度設置爲0或將其移出屏幕等等來使原始圖像不可見,以及b)在它的:: before或:: after僞中插入新圖像-元件。
儘管如此,瀏覽器將會加載原始圖像和新圖像,但這會帶來性能。但它不會需要Javascript!
還有另一種方式來解決這個問題:使用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 */
}
感謝。解決:) – bonaca
錯誤 - 你可以很容易地做到這一點與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