Utiliser SVG comme image d'arrière-plan

Question

Comment utiliser SVG comme image d'arrière-plan en CSS ? J'ai essayé de l'utiliser, mais je suis confus. Je sais qu'il devrait être au format CSS mais comment faire

P粉258083432 · Answer

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,");
}

Vous devez vous assurer que le contenu SVG (c'est-à-dire les caractères comme 之间的所有内容）不包含可能与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) :




    
    
    SVG Background

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.