按钮的图像上的 HTML 文本？答案

【问题标题】：HTML text over images for buttons?按钮的图像上的 HTML 文本？
【发布时间】：2011-04-26 14:14:48
【问题描述】：

我正在设计我的第一个网站。我在 gimp 中设计了一个按钮图像并将其保存为 jpg。我想将此按钮用于网站上的导航按钮。我应该为每个按钮制作一个单独的图像（jpeg）还是可以只使用一个图像然后使用 HTML 在页面上的图像顶部覆盖文本？这里的最佳做法是什么？

【问题讨论】：

【解决方案1】：

一定要重复使用图像和覆盖文本。有关如何执行此操作的想法，请查看本教程：

另外，您提到使用 jpg。考虑使用 PNG 代替按钮图像，除非它们是“真实世界”图像。对于简单的渐变和纯色，PNG 是不错的选择。

【讨论】：

【解决方案2】：

我还没有看到图像，但我通常会尽可能多地使用 CSS 进行图形设计。按钮通常在设计上往往非常简单。但是，如果您必须使用图像，您可以为标签分配背景，然后在标签中使用文本。示例是将背景分配给

<button class="myButtonClass">MyButtonText</button>

<style>
  .myButtonClass {
    //enter your button style here.
  }
</style>

【讨论】：

【解决方案3】：

通常在这种情况下，您通过设置应该是导航按钮的元素的背景属性来仅使用 CSS。

例如你可以有一个ul:

<ul>
  <li><a href="link">Button1</a></li>
  <li><a href="link">Button2</a></li>
  <li><a href="link">Button3</a></li>
</ul>

然后使用background-image 或类似样式在你的css 中设置样式，看看here 的一些例子..

【讨论】：

【解决方案4】：

您提出的问题更多是关于设计的，而不是关于编码的。如果您可以通过开发单个按钮背景然后以标准字体覆盖文本来实现您想要的设计，就这样做！更广泛地说：不要放置文本如果您只是使用标准字体，则在图像中。

另一方面，如果您想要一种只能在图像中描绘的精美漩涡字体，则需要使用该按钮的文本为每个按钮创建一个专门的图像。

在这种情况下，一定要完全使用 CSS 插入图像。永远不要，永远嵌入带有文本的 <img /> 标签页面上的按钮。

【讨论】：

【解决方案5】：

取决于您如何设计您的网站，因为总是有很多方法可以做任何事情。

如果您的按钮只是静态的，我建议您使用图片，这样做没有害处。

<a href="#" class="home"><span>Your button</span></a>

那么就可以使用css来设置图片背景了。

.home{display:block; height:20px; width:40px; background:url(image.gif);}

你还需要隐藏 span 中的文本。

.home span{display:none;}

使用简单的文本也没有什么坏处，大多数情况下是个人喜好。只需留下 .home span{display:none;} 并将其替换为使按钮中的文本居中的内容。

正如另一个答案中提到的，将图像包装在列表项中也是一种很好的做法。一开始可能听起来很奇怪。但实际上它是最好的方法。

【讨论】：

【解决方案6】：

你可以把图片作为背景...

【讨论】：