在MDN的文档中css``content:
css``content
/* <uri> value */ content: url(http://www.example.com/test.html);
题:
可以在元素的css content属性下html以的url()值显示图像content
css
content
html
url()
.content { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=); } <div class="content"></div>
或content在伪元素上使用属性,例如::before
::before
.content::before { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=); } <div class="content"></div>
是否可以渲染.html文档,.html元素位于css content?
.html
.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。
header/mng
header/png
<h1>
要使元素在其内容上进行后备,必须显式地将内容作为后备:
实施例5
content: url(1), url(2), url(3), contents;
问题3如果不支持任何格式,并且作者没有明确表示后退,该怎么办?
问题4除非作者明确声明,否则元素为何不退回内容?
更新资料
在此,最远的人员能够将html文档嵌入并显示在css生成的内容中;使用@LGSon演示的方法。包括css生成中的内容html,在svg为好。
svg
如@ RokoC.Buljan所述,MIME类型不是"text/html"。
"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>类型
<url>
MDN( 错误? )指出这是可能的 …
< uri>值
内容:url;
o_O可能是对建议书规范的错误解释,通常是 URL (限于某些MIME类型)和 URI 之间的基本区别。
虽然你可以在看到AJAX完美地完成这项工作, 而content: url(someValidHTMLUri.html)不是做工作text/[html,...],而不是MIME类型的内容进行编码,传输类application/,image/…
content: url(someValidHTMLUri.html)
text/[html,...]
application/
image/
http://jsbin.com/zozetaj/1/edit?html,css,js,output
该值是一个URI,用于指定外部资源(例如图像)。如果用户代理无法显示资源,则它必须像未指定资源一样将其丢弃,或者显示一些无法显示资源的指示。