将图像添加到HTML5中的按钮

Question

我正在制作HTML5视频播放器，但我需要在我的按钮上放置一个播放图标，旧方法不再有效。另外，我不能使用background-image:url('Filename');，因为我也有渐变，当我添加background-image时，它会覆盖我的渐变。有什么建议吗？

Answer 1

你可以做twitter bootstrap所做的事情，并在内容中使用<i class="some-icon-class"></i>来轻松添加图标。

该<i>标记的CSS设置为具有特定高度和宽度的块，并具有背景图像。

他们这样使用它：

<button ...><i class="plus-icon"></i> Add New Item</button>

检查出来：http://getbootstrap.com/2.3.2/base-css.html#icons

Answer 2

您尚未指定您的按钮元素标记的确切内容。但既然你说“html5”我会假设你使用的是实际的“按钮”标签。也许试试这个：

<button onClick="eventHandler();"><img src="button_image.png" /></button>

或许您正在寻找“更合适”的html5，其中未使用img标签且所有样式都严格地在CSS中？