是否可以在CSS内容上显示.html文档或.html片段？

Question

在MDN的文档中css``content：

 /* <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>

或content在伪元素上使用属性，例如::before

.content::before {

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

}


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

是否可以渲染.html文档，.html元素位于css content？

.content {

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

}


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

另请参阅CSS生成的内容模块级别3

该content属性指示在元素或伪元素内部呈现的内容。它需要用逗号分隔的URI列表，然后是用空格分隔的令牌列表。如果提供了多个URI，则依次尝试每个URI，直到找到一个既可用又受支持的值。如果其他值失败，则最后一个值用作备用。

对于值的最后一个逗号分隔部分中的URI以外的URI，如果URI可用并且支持格式，则该元素或伪元素将成为替换的元素，否则，逗号中的下一项将被分隔使用列表（如果有）。

实施例4

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

在上面的示例中，如果header/mng不是受支持的格式，则将header/png使用该格式。在上面的示例中，如果header/png也不可用，则该<h1>元素将为空，因为最后一个选择是none。

要使元素在其内容上进行后备，必须显式地将内容作为后备：

实施例5

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

问题3如果不支持任何格式，并且作者没有明确表示后退，该怎么办？

问题4除非作者明确声明，否则元素为何不退回内容？

更新资料

在此，最远的人员能够将html文档嵌入并显示在css生成的内容中；使用@LGSon演示的方法。包括css生成中的内容html，在svg为好。

如@ RokoC.Buljan所述，MIME类型不是"text/html"。

content {

  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJ5ZXMiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDQwMCAzMDAiPgogICAgPGZvcmVpZ25PYmplY3Qgd2lkdGg9IjQwMHB4IiBoZWlnaHQ9IjMwMHB4IiAKICAgICByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiPgogICAgICA8aHRtbCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCI+PGhlYWQ+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5jb250ZW50e2NvbnRlbnQ6dXJsKCJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQVNjQUFBRERDQVlBQUFEQStOZGhBQUFBQkhOQ1NWUUlDQWdJZkFoa2lBQUFBcGxKUkVGVWVKenQxQ0VCQUNBQXdEQ2dmdzF5UWdFOEYxdUNxOCt6eHhrQU1ldDNBTUNMT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRkpGMlBYQkNtc0t5TUpBQUFBQUVsRlRrU3VRbUNDIil9PC9zdHlsZT48L2hlYWQ+PGJvZHkgc3R5bGU9ImJvcmRlcjp0aGljayBzb2xpZCB5ZWxsb3c7YmFja2dyb3VuZDp1cmwoZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFTY0FBQURCQ0FZQUFBQ05NSFpxQUFBQUJITkNTVlFJQ0FnSWZBaGtpQUFBQXBKSlJFRlVlSnp0MURFQndDQVF3TUNueW5FT0JycVQ0VTVCcHF6WmN3WWc1bnNkQVBESG5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VpNlBEb0RBYnlDc244QUFBQUFTVVZPUks1Q1lJST0pIj48aDE+VGV4dCBnb2VzIGhlcmU8L2gxPjxpbWcgc3JjPSJncmVlbi5wbmciPjwvaW1nPjxkaWFsb2cgc3R5bGU9InRvcDoxNTBweDsiIG9wZW49InRydWUiPmNvbnRlbnQ8L2RpYWxvZz48Y29udGVudD48L2NvbnRlbnQ+PC9ib2R5PjwvaHRtbD4KICAgIDwvZm9yZWlnbk9iamVjdD4KPC9zdmc+Cg==)

}


<content></content>


<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 300">
    <foreignObject width="400px" height="300px" 
     requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
      <html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">content{content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADDCAYAAADA+NdhAAAABHNCSVQICAgIfAhkiAAAAplJREFUeJzt1CEBACAAwDCgfw1yQgE8F1uCq8+zxxkAMet3AMCLOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJF2PXBCmsKyMJAAAAAElFTkSuQmCC")}</style></head><body style="border:thick solid yellow;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=)"><h1>Text goes here</h1><img src="green.png"></img><dialog style="top:150px;" open="true">content</dialog><content></content></body></html>
    </foreignObject>
</svg>

内容，3.4。资源定位符：<url>类型

Answer 1

MDN（ 错误？ ）指出这是可能的
…

< uri>值

内容：url;

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

该值是一个URI，用于指定外部资源（例如图像）。如果用户代理无法显示资源，则它必须像未指定资源一样将其丢弃，或者显示一些无法显示资源的指示。