通过 CSS 注入 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9740134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Injecting HTML via CSS
提问by Naftuli Kay
I need to basically set the contentof something with HTML from CSS. I'm currently doing the following:
我需要content从 CSS 中使用 HTML设置某些东西。我目前正在做以下事情：
.myclass {
content "<img src=\"hello.png\"/>";
}
However, instead of the image, I see the literal text:
但是，我看到的不是图像，而是文字：
<img src="hello.png"/>
How can I inject arbitrary HTML using CSS?
如何使用 CSS 注入任意 HTML？
回答by zzzzBov
HTML stores the data, and is the Model
CSS stores the styles, and is the View
JS stores the interactions, and is the Controller
HTML存储数据，Model
CSS存储样式，View
JS存储交互，Controller
If you're trying to add data to the page, it should be done via HTML. If you're simply trying to add an image as a style, use the background-imageproperty. You don't need to inject an <img>element in the page to do that.
如果您尝试向页面添加数据，则应通过 HTML 完成。如果您只是尝试将图像添加为样式，请使用该background-image属性。你不需要<img>在页面中注入一个元素来做到这一点。
Don't ever do this, ever
永远不要这样做，永远不要
As far as being able to inject HTML into the page via CSS, it's not directly possible, however it's possible to add JavaScript into the page using CSS, which can then add HTML to the page.
就能够通过 CSS 将 HTML 注入页面而言，这不是直接可能的，但是可以使用 CSS将JavaScript添加到页面中，然后可以将 HTML 添加到页面中。
I can't emphasize enough how wrongthat approach would be.
我再怎么强调这种方法是多么错误。
回答by Peter Olson
Unless there is some strange hack that I am not aware of, this cannot be done with pure CSS.
除非有一些我不知道的奇怪的 hack，否则这不能用纯 CSS 来完成。
The contentproperty is only able to insert text; if you try to put in HTML, it will be escaped.
该content属性只能插入文本；如果您尝试放入 HTML，它将被转义。
That said, you cando something like this with pure CSS:
也就是说，你可以用纯 CSS 做这样的事情：
This is the CSS that can perform that effect:
这是可以执行该效果的 CSS：
.myClass:before {
display: inline-block;
width: 32px;
height: 32px;
content: "";
background-image: url("img.gif");
}
回答by Rob W
In this particular case, you can use a pseudo-class (eg ::before), background-image, display:blockand a fixed width and height to show the image.
在这种特殊情况下，您可以使用伪类（例如::before）background-image、display:block和固定的宽度和高度来显示图像。
Also, make sure that the colon :is added between contentand its value.
另外，请确保:在content和 其值之间添加冒号。
A relatively new concept at the horizon is the element()value for backgrounds. This will display HTML as if it were an image: See also -moz-element.
一个相对较新的概念是element()背景值。这会将 HTML 显示为图像：另请参见-moz-element。
回答by Steven Penny
This can be done. For example with Firefox
这是可以做到的。例如使用 Firefox
css
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>
回答by Florian Margaine
You can't. It's not what it's for. The CSS is for the presentation layer while the HTML is the data layer.
你不能。这不是它的目的。CSS 用于表示层，而 HTML 用于数据层。
Actually, you can, but just for characters, not HTML. You can use the contentproperty. With some CSS selectors like :before, you can do nice stuff like adding your own character as a bullet for your list. But not much more.
实际上，您可以，但仅限于字符，而不是 HTML。您可以使用该content物业。使用一些 CSS 选择器，例如:before，您可以做一些不错的事情，例如添加您自己的角色作为列表的项目符号。但不多了。
