我想在Web UI中使用图标，同时保留单击链接将实现的上下文语言，但可能不会显示文本和拥挤的UI空间。例如，使用CRUD屏幕，我想显示一个用于添加项目的加号图标，一个用于删除它的减号图标，一个用于编辑它的铅笔图标以及一个用于搜索其他项目的放大镜。有两种方法可以实现此目的。
在img锚内渲染一个a元素。 img alt属性将描述图标代表的内容（alt =“铅笔图标”），而title属性将描述预期的结果（即“单击此处以编辑此小部件”）。
仅渲染a nchor标签，然后使用css将图像显示为背景。在这种情况下，锚的内容应描述预期的结果，但it needs to be wrapped in a span element so that its display style can be set to none。锚点还应包含与内容匹配的标题属性（当然，范围不大）。
在我看来，选项2更容易在asp.net mvc应用中实现。由于图标是设计问题，而不是标记问题，因此在CSS中定义图像是有意义的。从代码维护的角度来看，这也使事情变得更容易...更改img src位置仅需要更改CSS文件，而无需更改视图文件。删除CSS也会导致应用程序也退回到全文可访问性。
对我来说，有趣的是有关将链接内容嵌套到跨度中以便可以在CSS中设置disply: none;的部分。另一件事是，如果我使用：hover选择器交换图像并提供过渡/转出效果，则交换图像似乎比用javascript完成需要更长的时间。
我在这里想念什么吗？
最佳答案
我们经常使用选项＃2，但方式不同。与其将锚内容包装在一个范围内，不如使用CSS将锚的样式设置为display: block或inline-block，然后将其text-indent设置为-1000em（或类似的选择一个大的值）。我认为您还必须将overflow设置为hidden。
如果将背景图像作为精灵（单个图像中同时具有非悬停和悬停状态）并使用:hover重新定位背景，则应避免出现现在可能出现的闪烁/延迟。这还会导致一个更少的单独请求到达您的Web服务器。
请注意，这还需要在CSS中显式设置锚点的width和height以匹配您的图标大小。
关于css - 链接图标应该呈现为图像还是具有CSS背景图像URL？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4717773/