¿Es posible mostrar un documento .html o un fragmento .html en contenido CSS?

En la documentación del content css en MDN :

 /*  value */ content: url(http://www.example.com/test.html); 

Pregunta:

Es posible visualizar una imagen en la propiedad de content css del elemento html en el valor de content url()

 .content { content: url(data:image/png;base64,iVBORw=); } 
 

o usar propiedad de content en un pseudo elemento, por ejemplo ::before

 .content::before { content: url(data:image/png;base64,iVBORw=); } 
 


¿Es posible representar un documento .html , un elemento .html en content css ?

 .content { content: url(data:text/html,abc); } 
 


Ver también Módulo de Contenido Generado CSS Nivel 3

La propiedad de content dicta qué se representa dentro del elemento o pseudo-elemento. Se necesita una lista de URI separada por comas, seguida de una lista de tokens separadas por espacios. Si hay varios URI proporcionados, entonces cada uno se prueba por turno hasta que se encuentre un valor que esté disponible y sea compatible. El último valor se usa como una reserva si los otros fallan.

Para URI que no sean URI en la última sección del valor separada por comas, si el URI está disponible y el formato es compatible, entonces el elemento o pseudo-elemento se convierte en un elemento reemplazado, de lo contrario, el siguiente elemento de la coma se separa la lista se usa, si hay alguna.

EJEMPLO 4

h1 { content: url(header/mng), url(header/png), none; }

En el ejemplo anterior, si el header/mng no estaba en un formato compatible, entonces se usaría header/png lugar. En el ejemplo anterior, si header/png tampoco estaba disponible, entonces el elemento

estaría vacío, ya que la última alternativa es none.

Para hacer que un elemento retroceda en su contenido, debe dar contenido explícitamente como una alternativa:

EJEMPLO 5

content: url(1), url(2), url(3), contents;

NÚMERO 3 ¿Qué sucede cuando no se admiten formatos y el autor no indica explícitamente un respaldo?

NÚMERO 4 ¿Por qué un elemento no retrocede a los contenidos a menos que un autor lo diga explícitamente?


Actualizar

Lo más lejos posible ha sido llegar, aquí, a incrustar y mostrar documentos html en contenido generado css ; usando el enfoque demostrado por @LGSon. Incluido el contenido generado css en html en svg también.

Como señaló @ RokoC.Buljan, el tipo MIME no es "text/html" .

 content { content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJ5ZXMiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDQwMCAzMDAiPgogICAgPGZvcmVpZ25PYmplY3Qgd2lkdGg9IjQwMHB4IiBoZWlnaHQ9IjMwMHB4IiAKICAgICByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiPgogICAgICA8aHRtbCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCI+PGhlYWQ+PHN+PGJvZHkgc+VGV4dCBnb2VzIGhlcmU8L2gxPjxpbWcgc3JjPSJncmVlbi5wbmciPjwvaW1nPjxkaWFsb2cgc3R5bGU9InRvcDoxNTBweDsiIG9wZW49InRydWUiPmNvbnRlbnQ8L2RpYWxvZz48Y29udGVudD48L2NvbnRlbnQ+PC9ib2R5PjwvaHRtbD4KICAgIDwvZm9yZWlnbk9iamVjdD4KPC9zdmc+Cg==) } 
  

    content{content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADDCAYAAADA+NdhAAAABHNCSVQICAgIfAhkiAAAAplJREFUeJzt1CEBACAAwDCgfw1yQgE8F1uCq8+zxxkAMet")}

Text goes here

content

contenido , 3.4. Localizadores de recursos: el tipo

MDN ( erróneamente? ) Afirma que es posible …

valor
contenido: url ( http://www.example.com/test.html );

o_O Probablemente una interpretación errónea de las Especificaciones de la Recomendación y la diferencia básica entre la URL (restrictiva a ciertos tipos de MIME) y el URI en general.

Si bien como puede ver en este ejemplo, AJAX hace el trabajo a la perfección,
while content: url(someValidHTMLUri.html) no funciona para text/[html, ...] , a diferencia de los tipos MIME Content-transfer-encoding como application/ , image/ , …

http://jsbin.com/zozetaj/1/edit?html,css,js,output

https://www.w3.org/wiki/CSS/Properties/content El valor es un URI que designa un recurso externo (como una imagen). Si el agente de usuario no puede mostrar el recurso, debe dejarlo como si no se hubiera especificado o mostrar alguna indicación de que el recurso no se puede mostrar.

Actualizado para aclarar, que esta solución SVG se publica en función de una solicitud realizada por el OP.

Aquí hay algunas muestras, como alternativa, ya que el documento HTML normal no se procesa (todavía), donde se usa un SVG, utilizando tanto el content css propiedad de content pseudo element css .

Tenga en cuenta que se representa como una image/svg+xml , aunque el ejemplo 2: nd muestra que puede contener elementos HTML.

 div { height: 120px; background: gray; } div:before { content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27100%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2745%27%20font-size%3D%2713px%27%3EHello%20World%20from%20SVG%3C%2Ftext%3E%3C%2Fsvg%3E); } div:after { content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E); } span { height: 120px; background: gray; content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27100%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2745%27%20font-size%3D%2713px%27%3EHello%20World%20from%20SVG%3C%2Ftext%3E%3C%2Fsvg%3E); }