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

问：

所以我有一个由我的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

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

enter image description here

如何解决此问题？

什么不起作用：

制作元素也删除了零件。<a>display: none:before
制作元素并将其移动到其他地方也行不通。<a>position: absolute
使元素搞砸了布局，因为通过添加的图像不在文档流中。<a>width: 0pxcontent

我不想做什么：

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

HTML CSS 内容

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 */ ;
}

我建议你的原因是：-

优势：

跨浏览器兼容
你能不能用精灵方法来减少每个选项卡的 http 请求图像请求
此外，您不会丢失标签之间的文本，就屏幕阅读器而言，这非常好。a

弊：

为每个设置自定义width

注意：如果你要使用精灵解决方案，那么无论如何都必须使用属性，所以在选择精灵方法之前，请务必先查看支持表。background-position

enter image description here

^{积分 - 用于支持表}

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

工作演示

上一个：添加 UIButton 目标时出现“classname has no member functionname”

下一个：使用“background-size： contain”调整背景图像的高度

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

How to replace HTML text with images using CSS content cross browser

评论

评论