Question

我想在按钮中显示嵌入的图像。图像是动态的，我更喜欢将图像显示为背景，因为我想在悬停时更改图像并单击。我面临的困难是：我希望按钮根据背景图像的大小调整大小。由于图像是动态的，我之前不知道它的大小。例如：

 <button id="rock" style='background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png)'>Test Rock</button>

http://jsfiddle.net/5z1L67fw/1/

我的其他选项是在按钮元素上包含一个img子元素。但是，在这种情况下，可以在悬停时更改图像并按？

Answer 1

你可以使用img作为孩子来做。

演示：http://jsfiddle.net/lotusgodkk/5mn0szq6/

在按钮内保留两个img标签。最初只显示一个标签。当按钮悬停时，隐藏可见的img并显示隐藏的img。同样的逻辑也适用于点击/按下。

<强> HTML ：

<button>
    <img class="a" src="http://www.lorempixel.com/600/200/sports/1/" />
    <img class="b" src="http://www.lorempixel.com/600/200/sports/2/" />
</button>

<强> CSS：

button {
    width:600px;
    height:200px;
    overflow:hidden;
}
.b {
    display:none;
}
button:hover .b {
    display:block;
}
button:hover .a {
    display:none;
}

这仅适用于悬停效果。你必须为点击处理程序编写javascript。

对于可变宽度，只需从按钮中删除尺寸即可。该按钮将根据新图像大小自行调整。

演示：http://jsfiddle.net/lotusgodkk/5mn0szq6/1/

Answer 2

如果您使用子图像，则可能无法在图像上显示文本。因此，您可以在鼠标悬停（hover）上动态更改背景图像。

请看这个演示：
https://jsfiddle.net/cyB7B/722/

<button type="image" 
style="background-image: url('http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png')"
 onmouseover="this.style.backgroundImage = 'url( \'https://www.google.co.uk/images/srpr/logo3w.png\')'"

 onmouseout="this.style.backgroundImage = 'url( \'http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png\')'"

> Soem Text
    </button>

Answer 3

你可以使用这个css：

button {
    font-size: 18px;
    border: 2px solid #AD235E;
    border-radius: 100px;
    background-repeat: no-repeat;
   background-size: contain;
    background-position: center;
}

包含动态图像的Html按钮 - 大小调整

3 个答案: