Question

我有一个表单提交按钮，其中包含一个背景图片，其中包含“漂亮”样式的“价值”文字版本。

我使用以下方法隐藏了html值文本：

text-indent: -9000px;
font-size: 0;

但是，关闭图像（用于辅助功能测试）显然没有显示按钮文本。

删除上面的内容会带来值文本，但它会覆盖在图像的顶部。

如何在值文本的顶部显示背景图像？

首先猜测是<button><span></span></button>的某种组合？

Answer 1

如何在按钮内使用img标签，并给出alt属性：

HTML：

<button class="button">
 <img src="http://www.google.nl/logos/2010/stnicday10-infstant.jpg" alt="google"/>
</button>

CSS：

.button {
    background: transparent;
    border: 1px solid Black;
}

Answer 2

您可以执行以下操作：<button>Your BTN Text<span class="img"> </span></button>

并在CSS中：

button { position: relative;}
button span {
  position: absolute;
  text-indent: -9000px;
  top:0;
  left: 0;
  right:0;
  bottom:0;
  background: url(yourimage.whatever);
}

所以如果我们禁用图像，文本仍然可以在绝对元素下看到。

Answer 3

作为value=""（空）：

<input type='submit' name="csubmit" value="" />

如果您有多个提交按钮，并根据按钮点击保留空白空间值进行验证：

<input type-"submit" name="csubmit1" value=" " />
<input type-"submit" name="csubmit2" value=" " />
<input type-"submit" name="csubmit3" value=" " />

Answer 4

将按钮的值设置为空：

<input type="submit" value="" />

您可以从CSS中删除text-indent。

这显然不会显示任何文字，但是当您禁用CSS背景时，该按钮仍然可见。

可访问的提交按钮与背景图像

4 个答案: