我需要基本上用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

回答

永遠不要做這個，不斷

相關問題