ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML ドキュメントまたはフラグメントを CSS コンテンツに表示できますか?

HTML ドキュメントまたはフラグメントを CSS コンテンツに表示できますか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-10-23 22:33:30379ブラウズ

Can HTML Documents or Fragments be Displayed in CSS Content?

CSS コンテンツで .html ドキュメント、または .html フラグメントを表示することは可能ですか?

質問:

content の url() 値の HTML 要素の CSS content プロパティに画像を追加しますか?

<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 生成コンテンツ モジュール]レベル 3](https://www.w3.org/TR/css-content-3/)
更新:

最も遠くまで到達できたものはここです、 CSS で生成されたコンテンツに HTML ドキュメントを埋め込んで表示します。 @LGSon によって実証されたアプローチを使用します。 SVG の HTML 内にも CSS で生成されたコンテンツが含まれています。

@RokoC.Buljan が指摘したように、MIME タイプは「text/html」ではありません。

以上がHTML ドキュメントまたはフラグメントを CSS コンテンツに表示できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。