是否可以在 CSS 内容处渲染 HTML 文档或 HTML 片段？

问题：

可以吗可以在内容的 url() 值处的 HTML 元素的 CSS 内容属性处显示图像吗？

<div class="content">
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}</div>

登录后复制

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

<div class="content">
  content::before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
  }
}</div>

登录后复制

是否可以在 CSS 内容中渲染 HTML 文档或 HTML 元素？

<div class="content">
  content: url(data:text/html,abc); 
}</div>

登录后复制

答案：
内容属性决定了元素或伪元素内呈现的内容。它采用逗号分隔的 URI 列表，后跟空格分隔的标记列表。如果提供了多个 URI，则依次尝试每个 URI，直到找到可用且受支持的值。如果其他值失败，最后一个值将用作后备值。

`<uri>`

登录后复制

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

示例 4

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

登录后复制

在上面的示例中，如果 header /mng 不是受支持的格式，那么将使用 header/png 来代替。在上面的示例中，如果 header/png 也不可用，则

元素将为空，因为最后一个选择是无。

要使元素后备其内容，您必须显式指定内容作为后备：

示例 5

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

登录后复制

问题 3 如果不支持任何格式，并且作者没有明确指示回退，会发生什么？

问题 4 为什么元素不会回退到内容，除非作者明确说明如此？

以上是是否可以使用嵌入文档或元素在 CSS 中渲染内容？的详细内容。更多信息请关注PHP中文网其他相关文章！