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

【问题标题】：How to replace HTML text with images using CSS content cross browser如何使用 CSS 内容跨浏览器将 HTML 文本替换为图像
【发布时间】：2014-01-18 00:04:17
【问题描述】：

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

菜单的 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 文本已替换为正确的图像：

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

我该如何解决这个问题？

什么没用：

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

我不想做的事：

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

【问题讨论】：

CSS image replacement is a well-documented technique.
@Blazemonger 没有一个例子都是绿色的
@Blazemonger 要使用它们中的任何一个，我必须在样式表中手动为每个项目指定宽度和高度，我想避免这种情况 - 这就是我使用 content 的原因首先。（不过，这是一个公平的妥协，如果没有其他问题，谢谢提醒。）
@mplungjan 该页面也有多年历史了。当时还没有现代浏览器。最后一个示例 here 在 HTML5Boilerplate 中使用到 2012 年 12 月。
我不认为有 any 方法可以在不指定尺寸的情况下进行 CSS 图像替换，除非可能使用 :before 或 :after。

标签： html css css-content

【解决方案1】：

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

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

Working Demo

【讨论】：

【解决方案2】：

在 OP 添加该行之前已回答了答案

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

所以如果对background-image 解决方案感兴趣的人可以参考这个，否则可以直接跳过。

我不确定我建议的最佳解决方案是什么，但您肯定可以为每个 a 元素使用 background-image，使用 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 方法。

^{Credits - 支持表}

【讨论】：

我进行了编辑，更清楚地说明了我为什么要避免这种情况。不过，如果没有其他方法出现，这是一个公平的出路。
公平点，我没有考虑精灵。除非第二天有其他事情发生，否则我会接受这个。
@Pekka웃 当然，慢慢来，但你在这里尝试的是，我觉得有点俗气，坚持标准方法...... :)
我认为该方法非常适合这种特定类型的问题 - 如果所有浏览器都支持它...
如果需要并且可以管理 Sprite 图像，我也会采用此解决方案

【解决方案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>

【讨论】：