通过CSS注入HTML

Question

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

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

然而，我没有看图像，而是看到文字文字：

<img src="hello.png"/>

如何使用CSS注入任意HTML？

Answer 1

HTML存储数据，并且是模型
CSS存储样式，并且是视图
JS存储交互，并且是Controller

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

不要这样做，永远

只要能够通过CSS将HTML注入页面，就不可能直接进行，但是可以添加JavaScript into the page using CSS，然后可以将HTML添加到页面中。

我不能过分强调错误这种方法是什么。

Answer 2

除非有一些我不知道的奇怪的黑客攻击，否则这不能用纯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

Answer 3

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

另外，请确保在:及其值之间添加冒号content。

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

Answer 4

这可以做到。例如使用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

Answer 5

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

实际上，您可以，但仅限于字符，而不是HTML。您可以使用content属性。对于像:before这样的CSS选择器，您可以做一些很好的事情，比如将自己的角色添加为列表的子弹。但不多。