首頁 > web前端 > css教學 > HTML 文件或片段可以在 CSS 內容中顯示嗎?

HTML 文件或片段可以在 CSS 內容中顯示嗎?

Mary-Kate Olsen
發布: 2024-10-23 22:33:30
原創
380 人瀏覽過

Can HTML Documents or Fragments be Displayed in CSS Content?

是否可以在 CSS 內容中顯示 .html 文件或 .html 片段?

問題:

是否可以顯示圖片位於 HTML 元素的 CSS content 屬性處,位於內容的 url() 值處?

<code class="css">.content {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}</code>
登入後複製
<code class="html"><div class="content"></div></code>
登入後複製
登入後複製
登入後複製

或在偽元素處使用content 屬性,例如::before

<code class="css">.content::before {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}</code>
登入後複製
<code class="html"><div class="content"></div></code>
登入後複製
登入後複製
登入後複製

是否可以在CSS 內容處渲染.html 文件、.html元素?

<code class="css">.content {
  content: url(data:text/html,abc);
}</code>
登入後複製
<code class="html"><div class="content"></div></code>
登入後複製
登入後複製
登入後複製

參考文獻:

  • [CSS 產生內容模組Level 3](https://www.w3.org/TR/css-content-3 /)

更新:

所能到達的最遠距離,在這裡,在CSS 產生的內容中嵌入和顯示HTML 文件;使用@LGSon 演示的方法。也包括 SVG 中 HTML 中 CSS 產生的內容。

如 @RokoC.Buljan 所指出的,MIME 類型不是「text/html」。

<code class="css">content {</code>
登入後複製

以上是HTML 文件或片段可以在 CSS 內容中顯示嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板