埋め込みドキュメントまたは要素を使用して CSS でコンテンツをレンダリングすることは可能ですか?

CSS コンテンツで HTML ドキュメントまたは HTML フラグメントをレンダリングすることは可能ですか?

質問:

ですか? content の url() 値で HTML 要素の CSS content プロパティに画像を表示できますか?

<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; }

上記の例では、ヘッダーの場合、 /mng はサポートされている形式ではないため、代わりに header/png が使用されます。上の例では、header/png も利用できない場合、

最後の選択肢が none であるため、要素は空になります。

要素のコンテンツをフォールバックするには、コンテンツをフォールバックとして明示的に指定する必要があります。

例 5

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

問題 3 フォーマットがサポートされておらず、作成者がフォールバックを明示的に示していない場合はどうなりますか?

問題 4 作成者が明示的に指定しない限り、要素がコンテンツにフォールバックしないのはなぜですか?

以上が埋め込みドキュメントまたは要素を使用して CSS でコンテンツをレンダリングすることは可能ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。