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.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket