Maison > interface Web > tutoriel CSS > le corps du texte

Les documents ou fragments HTML peuvent-ils être affichés dans du contenu CSS ?

Mary-Kate Olsen
Libérer: 2024-10-23 22:33:30
original
296 Les gens l'ont consulté

Can HTML Documents or Fragments be Displayed in CSS Content?

Est-il possible d'afficher un document .html, ou un fragment .html au niveau du contenu CSS ?

Question :

Il est possible d'afficher un image au niveau de la propriété de contenu CSS de l'élément HTML à la valeur url() du contenu ?

<code class="css">.content {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}</code>
Copier après la connexion
<code class="html"><div class="content"></div></code>
Copier après la connexion
Copier après la connexion
Copier après la connexion

Ou en utilisant la propriété de contenu au niveau d'un pseudo-élément, par exemple ::before

<code class="css">.content::before {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}</code>
Copier après la connexion
<code class="html"><div class="content"></div></code>
Copier après la connexion
Copier après la connexion
Copier après la connexion

Est-il possible de restituer un document .html, un élément .html au niveau du contenu CSS ?

<code class="css">.content {
  content: url(data:text/html,abc);
}</code>
Copier après la connexion
<code class="html"><div class="content"></div></code>
Copier après la connexion
Copier après la connexion
Copier après la connexion

Références :

  • [Module de contenu généré par CSS Niveau 3](https://www.w3.org/TR/css-content-3/)

Mise à jour :

Les plus éloignés ont pu atteindre, ici, à l'intégration et à l'affichage d'un document HTML dans du contenu généré par CSS ; en utilisant l'approche démontrée par @LGSon. Inclus également le contenu généré par CSS dans HTML sur SVG.

Comme l'a noté @RokoC.Buljan, le type MIME n'est pas "text/html".

<code class="css">content {</code>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!