Question

所以我有一个由我的CMS生成的导航菜单：

enter image description here

菜单的HTML很简单（为清晰起见而编辑）：

 <ul>
     <li><a href="...">Journal</a></li>
     <li><a href="...">Art</a></li>
     <li><a href="...">Work</a></li>
   </ul>

我希望这些项目显示为手写文本，与网站的一般主题保持一致，为每个菜单项使用单独的PNG文件。

为此，我使用了CSS content属性，如下所示：

#headerNav .nav li a[href="/_site/en/journal/"]  
 { content: url(/path/to/image.png); }

它工作得很好！每个项目的HTML文本都替换为正确的图像：

enter image description here

然而，唉，然后我了解到并非每个浏览器都支持content和:before以外的选择器上的:after属性！ Chrome和Safari可以做到这一点，但Firefox没有。但是，当我使用 :before时，HTML节点不会被替换，但会添加图像：

enter image description here

我该如何解决这个问题？

什么行不通：

使<a>元素display: none也移除了:before部分。
制作<a>元素position: absolute并将其移至其他位置也无效。
使<a>元素width: 0px搞砸布局，因为通过content添加的图片不在文档流程中。

我不想做的事情：

当然我可以手动输出图像，但我想使用CMS给我的HTML，<li> s，其中包含文字。
任何涉及background-image的解决方案都要求我在样式表中指定每个项目的宽度和高度，我想为此问题避免使用。
将手写内容转换为字体不是一种选择。
使用JavaScript来动态替换项目不是一种选择。这需要使用纯HTML和CSS。

Answer 1

由于您在导航栏中执行此操作，因此您应该使用固定的height使下一个方法可以正常工作：

首先在content元素上插入:before图片，并将其设为display:block以推送下面a标记的实际文字。
```
li a:before {
   content:url(http://design.jchar.com/font/h_1.gif);
   display:block;
}
```
然后在height标记上隐藏a个固定文字：
```
li a{
   height:50px;
   overflow:hidden;
}
```

Working Demo

Answer 2

在OP添加行

之前回答了问题

涉及background-image的任何解决方案都需要我指定样式表中的每个项目width和height，我想这样做避免出于这个问题的目的。

因此，如果对background-image解决方案感兴趣的人可以参考此内容，则可以直接跳过。

我不确定我建议的最佳解决方案是什么，但您肯定可以使用background-image元素使用a，使用nth-伪，并设置字体color透明，或使用text-indent

的overflow: hidden;属性

所以它会像

nav ul li {
   display: inline-block;
}

nav ul li:nth-of-type(1) a {
   background-image: url(#);
   display: block;
   width: /* Whatever */ ;
   color: transparent;
   text-indent: -9999px; /* Optional */
   overflow: hidden;
   font-size: 0; /* Optional, some people are really sarcastic for this */

   /* Below properties will be applicable if you are going for sprite methods */
   background-position: /* Depends */ ;
   background-size: /* If required */ ;
}

我建议你的原因是： -

优势：

跨浏览器兼容
您可以使用sprite方法来减少http请求，以便为每个标签请求图像
另外，您没有丢失a标签之间的文本，就屏幕阅读器而言，这是非常好的。

缺点：

为每个

width

注意：如果您要使用sprite解决方案，那么background-position无论如何都是必须要使用的属性，因此在选择sprite方法之前，请务必先检查支持表。

enter image description here

^{Credits - 支持表}

Answer 3

我会将PNG图片放入img标记，然后设置alt属性。

<ul>
<li><a href="..." title="Journal"><img src="journal.png" alt="Journal"/></a></li>
<li><a href="..." title="Art"><img src="art.png" alt="Art"/></a></li>
<li><a href="..." title="Work"><img src="work.png" alt="Work"/></a></li>
</ul>

如何使用CSS内容跨浏览器将HTML文本替换为图像

3 个答案: