Question

我在网站上有标签和提交按钮，这些按钮是使用包含单词Submit，Go等的背景图像构建的。如果图像被禁用，则按钮完全消失。建立网站时的规范非常详细和严格。

当鼠标悬停在按钮上时，他们喜欢鼠标悬停效果。这是用图像精灵作为背景图像和悬停完成选择器。
他们购买了一种特殊字体，用于图形中不使用的字体网络标准字体。
他们喜欢图形中文本的阴影和所有按钮有白色文字。
他们喜欢按钮上的圆角，以便所有背景图像有透明的角落，因为有些页面是白色的，有些形式有一个黄色背景。

我想到的一个他们不必放弃任何东西的解决方案是在锚标记中的img标记中放置1像素透明gif，并在alt属性中放置“Go”或“Submit”文本。这是否可以接受，尤其是出于搜索引擎优化目的？

另一种方法只是导致一系列我不愿意做的改变，但是如果必须的话。保留背景图像，但将文本移动到锚链接并使用标准Web字体。但由于这仍然是白页上的白色文字并且不可见，我必须指定深色背景颜色。但由于这会出现在图像的透明角落后面，我将不得不为白色和黄色页面/表格组成具有不同背景颜色的相同按钮的多个版本。

或者还有其他我没有想到的东西吗？

Answer 1

从一般的DOM规范来看，<a>标记没有强制要求来生成文本;例如，它们可以具有可用作“可点击”链接的图像（<img>元素）。

Answer 2

向您的客户解释使用按钮图像不是最佳做法。 Intsead，使用CSS3生成按钮 - 更好的性能和更易于维护。至于他们使用的自定义字体，请检查是否有用于@ font-face许可使用的选项。如果没有，我确定那里有类似的字体。

Answer 3

您可以使用“图像替换”技术轻松完成此操作，其中图像放置在原始文本上。如果禁用图像或未加载图像，原始文本将代替图像显示。如果图像是透明的，这有点棘手，但可以做到。这是一个带按钮元素的简单示例，但它可以在大多数元素上完成：

http://pageaffairs.com/sp/so-16469524-sprite/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
body {background: #e7e7e7;}

button {
    position: relative; 
    width: 150px;
    height:40px;
    color: white;
    border: 0;
    text-align: center;
    line-height: 30px;
    background: #27485b;
    cursor: pointer;
    border-radius: 10px;
    font-size: 1.4em;
}

button:hover {background: #bd9755;}

button span {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 40px;
    background: url(http://pageaffairs.com/sp/so-16469524-sprite/bg.png) no-repeat 0 0;
}

button:hover span {background-position: 0 -40px;}

</style>

</head>
<body>

<button value="Send" name="submit" type="submit">Submit<span></span></button>

</body>
</html>

<a> tags using CSS background images have no text</a>

3 个答案: