通过CSS注入HTML

Question

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

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

但是,我看到文字文本而不是图像:

<img src="hello.png"/>

如何使用CSS注入任意HTML？

Answer 1

HTML存储数据,并且是Model
CSS存储样式,并且是View
JS存储的交互,并且是Controller

如果您尝试向页面添加数据,则应通过HTML完成.如果您只是尝试将图像添加为样式,请使用该background-image属性.您不需要<img>在页面中注入元素来执行此操作.

永远不要做这个,永远

只要能够通过CSS将HTML注入到页面中,它就不可能直接实现,但是可以使用CSS将JavaScript添加到页面中,然后可以将CSS添加到页面中.

我不能强调这种方法有多么错误.

Answer 2

除非有一些我不知道的奇怪的黑客,否则这不能用纯CSS完成.

该content属性只能插入文本; 如果您尝试输入HTML,它将被转义.

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

这是可以执行该效果的CSS:

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

您可以在此jsFiddle页面上看到此操作.