CSS コンテンツ内に HTML コンテンツを表示できますか?-CSSチュートリアル-php.cn

CSS コンテンツ内に HTML コンテンツを表示できますか?

Patricia Arquette

リリース： 2024-10-23 21:32:02

オリジナル

335 人が閲覧しました

Can I Display HTML Content in CSS Content?

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

CSS コンテンツプロパティを使用すると、次のことを指定できます。要素または疑似要素の内容。コンテンツにはテキスト、画像、または URL を使用できます。コンテンツが URL の場合、ブラウザはその URL でリソースを取得し、要素または疑似要素内に表示します。

.html ドキュメントまたは .html フラグメントを直接表示することはできません。 CSS コンテンツプロパティ。ただし、同様の効果を達成するために使用できる回避策がいくつかあります。

回避策の 1 つは、HTML ドキュメントまたはフラグメントを含む SVG 画像を使用することです。 SVG 画像は CSS コンテンツプロパティで参照できるようになります。この方法は、すべての主要なブラウザで機能します。

もう 1 つの回避策は、データ URI を使用して HTML ドキュメントまたはフラグメントを CSS コンテンツプロパティに埋め込むことです。データ URI は、URL 内の任意のデータをエンコードする方法です。データ URI を作成するには、データの前に文字列「data:」を付け、その後にデータの MIME タイプとカンマを続けます。たとえば、HTML ドキュメントのデータ URI を作成するには、次の構文を使用します:

data:text/html,<html><body><h1>Hello world!</h1></body></html>

ログイン後にコピー

その後、次のように CSS コンテンツプロパティでデータ URI を使用できます:

content: url(data:text/html,<html><body><h1>Hello world!</h1></body></html>);

ログイン後にコピー

この方法はほとんどの主要なブラウザで機能しますが、Internet Explorer ではサポートされていません。

最後に、サーバー側スクリプトを使用して CSS コンテンツを生成することもできます。スクリプトは、ファイルまたはデータベースから HTML ドキュメントまたはフラグメントを読み取り、CSS コンテンツプロパティで使用できる形式でコンテンツを出力できます。このメソッドは他の 2 つのメソッドより複雑ですが、表示されるコンテンツをより詳細に制御できます。

CSS コンテンツプロパティを使用して HTML コンテンツを表示する方法の例をいくつか示します。

/* Display an image of an HTML document */
content: url(image.svg);

/* Display an HTML document fragment */
content: url(data:text/html,<html><body><h1>Hello world!</h1></body></html>);

/* Display the contents of an HTML file */
content: url(file.html);

/* Generate the CSS content using a server-side script */
content: url(/script.php);

ログイン後にコピー

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