Question

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

Answer 1

通常在这种情况下，您只需通过设置应该是导航按钮的元素的背景属性来使用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的一些例子......

Answer 2

你问的是关于设计的问题而不是关于编码的问题。如果您可以通过开发单个按钮背景然后用标准字体覆盖文本来实现所需的设计， 执行此操作！ 更广泛地说：不要放置文本如果您只使用标准字体，则在图像中显示。

另一方面，如果你想要一个只能在图像中描绘的花哨的旋涡字体，你需要使用该按钮的文本为每个按钮创建一个专门的图像。

在这种情况下， 一定要纯粹使用CSS插入图片。 从不，永远嵌入<img />标记页面上的文字按钮。

Answer 3

绝对重复使用图片和叠加文字。有关如何执行此操作的建议，请查看本教程：

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

Answer 4

我还没有看到图片，但我通常会尝试使用CSS尽可能多的图形设计。按钮通常在设计上非常简单。但是，如果必须使用图像，则可以为标记指定背景，然后在标记中使用文本。示例是为

指定背景

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

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

Answer 5

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

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

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

然后你可以用css来设置图像背景。

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

你还需要隐藏文本。

.home span{display:none;}

使用简单文本也没有坏处，大部分时间都是个人偏好。只需离开.home span{display:none;}，然后将其替换为按钮中的文本中心。

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

Answer 6

你可以将图像作为背景......