是否可以在 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中文網其他相關文章！