ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS コンテンツ内に HTML コンテンツを表示できますか?
CSS コンテンツ内に HTML コンテンツを表示できますか?
- Patricia Arquetteオリジナル
- 2024-10-23 21:32:02428ブラウズ
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 サイトの他の関連記事を参照してください。