En CSS, vous pouvez utiliser l'attribut background-image ou background pour insérer une image d'arrière-plan. Le format de syntaxe de base est "background-image/background:url('URL')". pour spécifier le chemin de l’image d’arrière-plan.
L'environnement d'exploitation de ce tutoriel : Système Windows 7, version HTML5+CSS3, cette méthode convient à toutes les marques d'ordinateurs.
Recommandé : "Tutoriel vidéo CSS"
En CSS, vous pouvez utiliser l'attribut background-image ou background pour insérer une image d'arrière-plan.
attribut background-image
L'attribut background-image définit l'image d'arrière-plan d'un élément. L'arrière-plan d'un élément correspond à la taille totale de l'élément, y compris le remplissage et les bordures (mais pas les marges).
Syntaxe :
background-image:url('URL'));
url('URL') URL de l'image
Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l’élément, et répétez verticalement et horizontalement.
Conseil : Veuillez définir une couleur d'arrière-plan disponible afin que si l'image d'arrière-plan n'est pas disponible, la bande de couleur d'arrière-plan puisse être utilisée à la place.
attribut d'arrière-plan
L'attribut d'arrière-plan est une propriété qui définit spécifiquement l'arrière-plan. Vous pouvez définir la couleur d'arrière-plan ou l'image d'arrière-plan.
L'attribut background est un attribut abrégé qui peut définir tous les attributs d'arrière-plan dans une seule instruction.
Les attributs qui peuvent être définis sont :
background-color : Spécifie la couleur d'arrière-plan à utiliser.
background-position : Spécifie la position de l'image d'arrière-plan.
background-size : Spécifie la taille de l'image d'arrière-plan.
background-repeat : Spécifie comment répéter l'image d'arrière-plan.
background-origin : Spécifie la zone de positionnement de l'image d'arrière-plan.
background-clip : Spécifie la zone de dessin de l'arrière-plan.
background-attachment : Spécifie si l'image d'arrière-plan est fixe ou défile avec le reste de la page.
background-image : Spécifie l'image d'arrière-plan à utiliser.
Exemple :
background:url(bgimg.gif) no-repeat 5px 5px;
Expliqué ci-dessous :
Exemple d'image d'arrière-plan :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片设置</title>
<style>
.demo1{
width: 400px;
height: 200px;
background-color: #fff;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.demo2{
width: 400px;
height: 200px;
background:#fff url(bg.jpg) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="demo1"></div><br />
<div class="demo2"></div>
</body>
</html>
Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !
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!
Tant de liens de couleursApr 13, 2025 am 11:36 AMIl y a eu une série d'outils, d'articles et de ressources sur la couleur récemment. Veuillez me permettre de fermer quelques onglets en les rassemblant ici pour votre plaisir.
Comment fonctionnent les marges automnales dans FlexboxApr 13, 2025 am 11:35 AMRobin a déjà couvert cela, mais j'ai entendu une certaine confusion au cours des dernières semaines et j'ai vu une autre personne prendre un coup de poing pour l'expliquer, et je voulais
Les soulignements arc-en-ciel en mouvementApr 13, 2025 am 11:27 AMJ'adore la conception du site Sandwich. Parmi les nombreuses caractéristiques belles figurent ces titres avec des soulignements arc-en-ciel qui se déplacent lorsque vous faites défiler. Ce n'est pas
Nouvel An, nouvel emploi? Laisse faire un curriculum vitae à propulsion de grille!Apr 13, 2025 am 11:26 AMDe nombreux conceptions de CV populaires tirent le meilleur parti de l'espace de page disponible en disant des sections en forme de grille. Utilisons la grille CSS pour créer une disposition qui
Une façon de sortir les utilisateurs de l'habitude de recharger tropApr 13, 2025 am 11:25 AMLes recharges de page sont une chose. Parfois, nous actualisons une page lorsque nous pensons que cela ne répond pas, ou croyons que un nouveau contenu est disponible. Parfois, nous sommes juste en colère contre
Conception axée sur le domaine avec réactApr 13, 2025 am 11:22 AMIl y a très peu de conseils sur la façon d'organiser des applications frontales dans le monde de la réaction. (Déplacez simplement les fichiers jusqu'à ce qu'il «se sent bien», LOL). La vérité
Détecter les utilisateurs inactifsApr 13, 2025 am 11:08 AMLa plupart du temps, vous ne vous souciez pas vraiment de savoir si un utilisateur est activement engagé ou temporairement inactif sur votre application. Inactif, signifiant, peut-être qu'ils
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo a toujours été génial avec les intégrations. Ils ont des intégrations avec des applications spécifiques, comme Campaign Monitor, MailChimp et Typekit, mais ils aussi
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Adaptateur de serveur SAP NetWeaver pour Eclipse
Intégrez Eclipse au serveur d'applications SAP NetWeaver.
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
ZendStudio 13.5.1 Mac
Puissant environnement de développement intégré PHP
VSCode Windows 64 bits Télécharger
Un éditeur IDE gratuit et puissant lancé par Microsoft
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
