ホームページ > ウェブフロントエンド > 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 フラグメントを表示することは可能ですか?

質問:

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 サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート