Мне нужно в основном установить content что-то с HTML из CSS. В настоящее время я делаю следующее:Ввод HTML через CSS

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

Однако, вместо изображения, я вижу буквальный текст:

<img src="hello.png"/>

Как я могу придать произвольный HTML с помощью CSS?

источник

2012-03-16 Naftuli Kay

Это не может быть сделано, я боюсь. – MrMisterMan

Для реалов? Не за что? –

Это может помочь: http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content –

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

Я нахожусь в необходимости странного взлома ... –

Странный хак потребует JavaScript, к сожалению. –

Кроме того, Javasript оборудован для этого и не нуждается в каких-либо странных хаках. –

В данном конкретном случае, вы можете использовать псевдо-класс (например ::before), background-image, display:block и фиксированную ширину и высоту, чтобы показать изображение.

Кроме того, убедитесь, что двоеточие : добавлено между content и его значением.

Относительно новая концепция на горизонте - значение element() для фона. Это отобразит HTML, как если бы это было изображение: См. Также -moz-element.

источник

2012-03-16 15:35:55

К сожалению, я работаю с печатными носителями, поэтому я не могу использовать селектор ': before' на моем селекторе' @page @ top-left', я пробовал :( –

@TKKocheran Еще один экзотический подход: добавьте отрицательное левое поле для вашего элемента и положительное левое заполнение. Затем добавьте фоновое изображение на элемент * сам *. Убедитесь, что вы используете «background-repeat: no-repeat», чтобы показывать изображение только один раз. –

Вы не можете. Это не то, для чего. CSS предназначен для уровня представления, а HTML - слоя данных.

Собственно, вы можете, но только для символов, а не для HTML. Вы можете использовать свойство content. С помощью некоторых селекторов CSS, таких как :before, вы можете делать приятные вещи, такие как добавление своего персонажа в качестве пули для вашего списка. Но не намного больше.

источник

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

Ввод HTML через CSS

ответ

Не когда-нибудь сделать это, когда

Смежные вопросы