Est-il possible de restituer un document HTML ou un fragment HTML au contenu CSS ?

Question :

Est-ce possible d'afficher une image au niveau de la propriété CSS content d'un élément HTML à la valeur url() du contenu ?

<div class="content">
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}</div>

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

<div class="content">
  content::before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
  }
}</div>

Est-il possible de restituer un document HTML ou un élément HTML au contenu CSS ?

<div class="content">
  content: url(data:text/html,abc); 
}</div>

Réponse :
Le contenu La propriété dicte ce qui est rendu à l'intérieur de l'élément ou du pseudo-élément. Il faut une liste d'URI séparés par des virgules, suivie d'une liste de jetons séparés par des espaces. Si plusieurs URI sont fournis, chacun est essayé tour à tour jusqu'à ce qu'une valeur à la fois disponible et prise en charge soit trouvée. La dernière valeur est utilisée comme solution de secours si les autres échouent.

`<uri>` 

Pour les URI autres que les URI dans la dernière section séparée par des virgules de la valeur, si l'URI est disponible et que le format est pris en charge, alors le L'élément ou le pseudo-élément devient un élément remplacé, sinon l'élément suivant dans la liste séparée par des virgules est utilisé, le cas échéant.

EXEMPLE 4

h1 { content: url(header/mng), url(header/png), none; }

Dans l'exemple ci-dessus, si l'en-tête /mng n'était pas dans un format pris en charge, alors header/png aurait été utilisé à la place. Dans l'exemple ci-dessus, si header/png n'était pas non plus disponible, alors le

l'élément serait vide, car la dernière alternative est aucune.

Pour faire en sorte qu'un élément se replie sur son contenu, vous devez explicitement donner le contenu comme repli :

EXEMPLE 5

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

Copier après la connexion

NUMÉRO 3 Que se passe-t-il lorsqu'aucun format n'est pris en charge et que l'auteur n'indique pas explicitement une solution de secours ?

NUMÉRO 4 Pourquoi un élément ne revient-il pas au contenu à moins qu'un auteur ne le dise explicitement ?

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!