HTML中的图片按钮 [英] Image button in html

问题描述

我正在尝试获取带有图像的按钮.我见过类似以下内容的内容，但它们没有普通按钮所具有的按钮按下/释放效果.

I'm trying to get a button that has an image on it. I've seen stuff like the following but they don't give you the button press/release effect that a normal button does.

<input type="image"  id="saveform" src="logg.png " alt="Submit Form" />

有没有一种方法可以使按钮获得单击/释放效果，而只是在按钮内拍一个图像?

Is there a way to get the button click/release effect but just slap an image inside the button?

推荐答案

是的，可以通过将background-image应用于button来实现，

Yes there is, by applying a background-image to the button like so:

HTML

<button>Click Me</button>

CSS

button{
  background-image: url("YourImageHere");
  color: #FFF; //random values
  height: 50px; //random values
  width: 100px; //random values   
}

FIDDLE

这篇关于HTML中的图片按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！