【问题标题】：Injecting HTML via CSS通过 CSS 注入 HTML
【发布时间】：2012-04-02 03:58:11
【问题描述】：

我基本上需要用 CSS 中的 HTML 设置 content。我目前正在做以下事情：

.myclass {
    content "<img src=\"hello.png\"/>";
}

但是，我看到的不是图像，而是文字：

<img src="hello.png"/>

如何使用 CSS 注入任意 HTML？

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/190396/…
@SimonEdström 不幸的是没有。我正在构建它的输出仅支持 HTML/CSS。
@PhilipBevan，是的，我已经看到了。我只需要以某种方式对我的 HTML 进行编码吗？
@PhilipBevan - 是的，完全一样。
@TKKocheran - 是的，您必须将其编码为转义的 Unicode，就像该问题中的答案所说的那样。

标签： html css

【解决方案1】：

这是可以做到的。以 Firefox 为例

css

#hlinks
{
  -moz-binding: url(stackexchange.xml#hlinks);
}

stackexchange.xml

<bindings xmlns="http://www.mozilla.org/xbl"
  xmlns:html="http://www.w3.org/1999/xhtml">
  <binding id="hlinks">
    <content>
      <children/>
      <html:a href="/privileges">privileges</html:a>
      <html:span class="lsep"> | </html:span>
      <html:a href="/users/logout">log out</html:a>
    </content>
  </binding>
</bindings>

ref 1

ref 2

【讨论】：

-moz-binding 自 Gecko 57 (Firefox 57 / Thunderbird 57 / SeaMonkey 2.54) 起已弃用

【解决方案2】：

除非有一些我不知道的奇怪 hack，否则纯 CSS 无法做到这一点。

content 属性只能插入文本；如果您尝试放入 HTML，它将被转义。

也就是说，你可以用纯 CSS 做这样的事情：

这是可以实现该效果的 CSS：

.myClass:before {
  display: inline-block;
  width: 32px;
  height: 32px;
  content: "";
  background-image: url("img.gif");
}

You can see this in action on this jsFiddle page.

【讨论】：

遗憾的是，奇怪的 hack 需要 JavaScript。
Javasript 能够做到这一点并且不需要任何奇怪的 hack。

【解决方案3】：

HTML 存储数据，是模型
CSS 存储样式，是 View
JS存储交互，是Controller

如果您尝试向页面添加数据，则应通过 HTML 完成。如果您只是想将图像添加为样式，请使用 background-image 属性。您无需在页面中注入 <img> 元素即可。

永远不要这样做，永远

至于能够通过 CSS 将 HTML 注入页面，这不是直接可能的，但是可以添加 JavaScript into the page using CSS，然后可以将 HTML 添加到页面中。

我无法足够强调这种方法的错误。

【讨论】：

【解决方案4】：

你不能。这不是它的用途。 CSS 用于表示层，而 HTML 用于数据层。

实际上，您可以，但仅适用于字符，而不适用于 HTML。您可以使用content 属性。使用 :before 之类的 CSS 选择器，您可以做一些不错的事情，例如将自己的角色添加为列表的项目符号。但仅此而已。

【讨论】：

【解决方案5】：

在这种特殊情况下，您可以使用伪类（例如::before）、background-image、display:block 和固定的宽度和高度来显示图像。

另外，请确保在 content 和它的值之间添加冒号 :。

一个相对较新的概念是背景的element() 值。这将像显示图像一样显示 HTML：另请参阅 -moz-element。

【讨论】：

不幸的是，我正在使用印刷媒体，所以我不能在我的@page @top-left 选择器上使用:before 选择器，我试过了:(
@TKKocheran 另一种奇特的方法：为您的元素添加一个负的左边距和一个正的左边距。然后在元素本身上添加背景图片。确保您使用background-repeat:no-repeat 仅显示一次图像。
evil button example 看起来很危险，但实际上是 harmless。