- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
P粉2580834322023-08-15 16:48:02
Bien sûr ! Il est très simple d'utiliser SVG comme image d'arrière-plan en HTML et de le définir via CSS. Je vais vous fournir les étapes.
Inclure SVG directement dans CSS :
Si vous avez du code SVG, vous pouvez l'intégrer directement dans CSS en utilisant l'URL des données. Par exemple :
.my-element {
background-image: url("data:image/svg+xml,<svg ... > ... </svg>");
}
Vous devez vous assurer que le contenu SVG (c'est-à-dire les caractères comme <svg> ... </svg>之间的所有内容）不包含可能与CSS语法冲突的任何字符。这包括像#，"或;) Vous pouvez encoder ces caractères en URL pour éviter les problèmes
Utilisez le fichier SVG comme arrière-plan :
Si votre contenu SVG se trouve dans un fichier séparé, tel que background.svg, vous pouvez le référencer comme n'importe quelle autre image :
.my-element {
background-image: url('path/to/your/background.svg');
}
Implémenté en HTML et CSS :
Ceci est un exemple simple. Disons que vous enregistrez votre SVG dans un fichier appelé background.svg :
HTML (index.html) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Background</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="my-element">
<!-- Your content here -->
</div>
</body>
</html>
CSS (styles.css) :
.my-element {
width: 300px; /* or whatever size you want */
height: 300px;
background-image: url('background.svg');
background-repeat: no-repeat; /* this prevents the image from repeating */
background-size: cover; /* this scales the image to cover the div */
}
Remarques :
N'oubliez jamais que pour afficher un SVG, l'élément (dans ce cas my-element）应具有指定的width和height) ou suffisamment de contenu pour lui donner des dimensions.
Utilisez background-size，background-position etc. pour ajuster le positionnement et la taille de l'arrière-plan SVG souhaité.
Maintenant, lorsque vous ouvrez l'arrière-plan du index.html时，您应该看到SVG作为my-element div.