Возможно ли отобразить документ .html или .html фрагмент в содержимом CSS?

В документация для css content в MDN:

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

Вопрос:

Можно отобразить изображение в свойстве css content элемента html в url() значение content

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

<div class="content"></div>

Ответ 1

MDN (ошибочно?) утверждает, что это возможно......

< &gt URI; значение
content: url (http://www.example.com/test.html);

o_O Вероятно, неверное истолкование Рекомендаций спецификации и основное различие между URL (ограничивающим определенные типы MIME) и URI в целом.

Пока вы можете видеть в в этом примере AJAX отлично выполняет работу,
в то время как content: url(someValidHTMLUri.html) не работает для text/[html, ...], в отличие от MIME-типов. Кодирование передачи содержимого, такое как application/, image/,...

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

https://www.w3.org/wiki/CSS/Properties/contentЗначение - это URI, который обозначает внешний ресурс (например, изображение). Если пользовательский агент не может отобразить ресурс, он должен либо оставить его, как если бы он не был указан, либо отобразить некоторое указание на то, что ресурс не может быть отображен.

Ответ 2

Обновлено, чтобы уточнить, что это решение SVG размещено на основе запроса, сделанного OP.

Вот несколько примеров в качестве альтернативы, поскольку обычный HTML-документ не отображается (пока), где используется SVG, используя свойство css content и псевдоэлемент css content.

Обратите внимание, что он отображается как image/svg+xml, хотя образец 2: nd показывает, что он может содержать элементы 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);
}

<div></div>
<span></span>