Html 带有背景图像的可访问提交按钮

我有一个表单提交按钮，使用它有一个背景图像，其中包含“值”文本的“漂亮”样式版本

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

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

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

删除上面的内容会使值文本返回，但它会覆盖在图像的顶部

如何将背景图像置于值文本之上

---

首先猜测是某种组合的

？

将按钮的值设置为空：

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

您可以从CSS中删除

文本缩进

这显然不会显示任何文本，但当您禁用CSS背景时，按钮仍将可见。
将按钮的值设置为空：

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



您可以从CSS中删除
文本缩进

这显然不会显示任何文本，但当您禁用CSS背景时，按钮仍将可见。
您可以这样做：
您的BTN文本

在CSS中：

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

因此，如果我们禁用图像，文本在绝对元素下仍然可见。
您可以这样做：
您的BTN文本

在CSS中：

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

因此，如果我们禁用图像，文本在绝对元素下仍然可见。
在按钮内使用img标记，并赋予该标记alt属性如何：

HTML:

在按钮内部使用img标记，并为其提供alt属性如何：

HTML:

设为
value=”“
（空）：



如果您有多个提交按钮，并根据单击的按钮进行验证，请将值留空：

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


设为
value=”“
（空）：



如果您有多个提交按钮，并根据单击的按钮进行验证，请将值留空：

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


无图像的用例是什么？屏幕阅读器？如果是这种情况，那么文本缩进文本仍将被读取。如果您担心无障碍性，您确定这是一条正确的路线吗？将解释性文本放在按钮外不是更容易吗？@Pekka，抱歉，问题不完全清楚-它不是解释性文本，而是值将显示的文本-将问题更改为反映。无图像的用例是什么？屏幕阅读器？如果是这种情况，那么文本缩进文本仍将被读取。如果您担心无障碍性，您确定这是一条正确的路线吗？将解释性文本放在按钮外不是更容易吗？@Pekka，对不起，问题不完全清楚-它不是解释性文本，而是值将显示的文本-更改了问题以反映。不能有一个包含文本的背景图像，而其下的按钮值仅包含HTML和CSS。您可以不带任何值，也可以将背景更改为不包含任何文本，并设置提交按钮文本的样式。您不能将带有文本的背景图像及其下方的按钮值仅包含HTML和CSS。要么不带任何值，要么将背景更改为不包含文本，并设置提交按钮文本的样式。P.s。删除google URL中的“f”以查看图像而不是alt文本：“infstant”变为“instant”P.S.删除google URL中的“f”以查看图像而不是alt文本：“infstant”变为“instant”