Maison > interface Web > tutoriel CSS > Puis-je utiliser des images SVG comme contenu dans des pseudo-éléments CSS ?

Puis-je utiliser des images SVG comme contenu dans des pseudo-éléments CSS ?

Barbara Streisand
Libérer: 2024-12-08 09:51:11
original
645 Les gens l'ont consulté

Can I Use SVG Images as Content in CSS Pseudo-elements?

Affichage du SVG en tant que contenu dans des pseudo-éléments

En CSS, les pseudo-éléments tels que ::before et ::after peuvent améliorer l'élément apparence en ajoutant du contenu avant ou après. Bien que le contenu textuel soit couramment utilisé, est-il possible d'afficher une image SVG en tant que contenu au sein de ces pseudo-éléments ?

Pour y parvenir, spécifiez l'URL de l'image SVG comme valeur de contenu pour le pseudo-élément. Par exemple :

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}
Copier après la connexion

Alternativement, vous pouvez intégrer le SVG directement dans le CSS en utilisant la syntaxe data:image/svg xml :

#test::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180'>
Copier après la connexion

Cette technique vous permet d'incorporer des SVG complexes graphiques dans vos pages Web en utilisant la puissance du CSS.

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.cn
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