html - 将图像添加到 HTML5 中的按钮

Question

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

Answer 1

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

该<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>

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