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 に答える
3

srcCSSで画像属性を設定することはできません。backgroundまたはを使用するかのように、 is を取得できますbackground-image。

于 2013-07-17T16:56:07.957 に答える
2

いいえ - CSS は CSS 背景画像の変更にのみ使用でき、HTML コンテンツには使用できません。

一般に、UI 要素 (コンテンツではない) は、とにかく CSS 背景を使用してレンダリングする必要があります。クラスを交換すると、背景画像を交換できます。

于 2013-07-17T16:55:40.603 に答える