我需要基本上用CSS设置HTML的content。我目前做如下：通过CSS注入HTML

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

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

<img src="hello.png"/>

我怎么能注入使用CSS任意HTML？

来源

2012-03-16 Naftuli Kay

它不能做我害怕。 – MrMisterMan 2012-03-16 15:33:15

For reals？一点也不？ – 2012-03-16 15:33:47

这可能有所帮助：http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content – 2012-03-16 15:34:04

HTML存储数据，并且是型号
CSS店的样式，并且是查看
JS店的互动，是控制器

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

永远不要做这个，不断

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

我不能强调如何错误该方法会。

来源

2012-03-16 15:42:26 zzzzBov

除非有一些奇怪的黑客我不知道，这不能用纯CSS完成。

content属性只能插入文本;如果你尝试使用HTML，它会被转义。

这就是说，你可以这样做纯CSS：

enter image description here

这是可以执行该效果的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。

来源

2012-03-16 15:35:53

我发现自己需要一个奇怪的黑客... – 2012-03-16 15:36:20

奇怪的黑客将需要JavaScript，悲伤。 – 2012-03-16 15:37:24

除Javasript装备这样做，并不需要任何奇怪的黑客。 – 2012-03-16 15:38:39

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

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

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

来源

2012-03-16 15:35:55

不幸的是，我正在使用印刷媒体，所以我不能在我的@page @ top-left'选择器上使用'：before'选择器，我试过:( – 2012-03-16 16:11:53

@TKKocheran另一个奇特的方法：添加一个你的元素的负左边距，以及一个正的左边距，然后在背景图片上添加背景图片*确保你使用'background-repeat：no-repeat'来仅显示一次图片。 – 2012-03-16 16:19:20

你不能。这不是它的目的。 CSS代表表示层，而HTML代表数据层。

其实，你可以，但只适用于字符，不适用于HTML。您可以使用content属性。有了像:before这样的一些CSS选择器，你可以做很棒的事情，比如将你自己的角色添加为你的列表中的子弹。但不多。

来源

2012-03-16 15:36:23

这可以做到。例如与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="https://stackoverflow.com/users/logout">log out</html:a> 
    </content> 
    </binding> 
</bindings>

ref 1

ref 2

来源

2013-01-19 09:03:29

通过CSS注入HTML

回答

永远不要做这个，不断

相关问题