Maison > Article > interface Web > Comment définir l'arrière-plan de l'image avec CSS
Comment définir l'arrière-plan de l'image avec CSS
- 青灯夜游original
- 2021-04-20 16:42:0932479parcourir
Comment définir l'arrière-plan de l'image avec CSS : 1. Utilisez l'attribut background-image, la syntaxe "background-image:url('image address');" 2. Utilisez l'attribut background, la syntaxe "background:url('Adresse de l'image');".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, vous pouvez utiliser l'attribut background-image ou l'attribut background pour définir l'arrière-plan de l'image.
Attribut CSS 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).
Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'élément et se répète verticalement et horizontalement.
Valeur de l'attribut :
url('URL') Chemin pointant vers l'image.
aucun Valeur par défaut. Aucune image d'arrière-plan n'est affichée.
inherit spécifie que le paramètre de la propriété background-image doit être hérité de l'élément parent.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css设置背景图片</title>
<style>
body {
background-image: url('img/1.jpg');
}
</style>
</head>
<body>
</body>
</html>Rendu :
attribut d'arrière-plan CSS
L'attribut background est une propriété qui définit spécifiquement l'arrière-plan. Il s'agit d'une propriété abrégée qui peut définir toutes les propriétés d'arrière-plan dans une seule instruction. (Partage vidéo d'apprentissage : tutoriel vidéo CSS)
Attributs pouvant être définis par arrière-plan :
background-color : Spécifie la couleur d'arrière-plan à être utilisé.
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.
On peut voir que l'attribut background-image sert à définir l'attribut d'image d'arrière-plan pour la page html. Jetons un coup d'œil à son utilisation
background-image:url(1.jpg);
C'est. donné dans url() En spécifiant le chemin de l'image, vous pouvez définir une image d'arrière-plan pour la boîte div ; cela semble simple, mais une chose à noter est que la boîte de définition de l'image d'arrière-plan doit avoir une largeur et une hauteur substantielles, donc que l'image d'arrière-plan puisse être affichée sur l'écran.
Si définir les attributs d'arrière-plan ci-dessus un par un semble fastidieux, en fait, certains attributs peuvent être définis ensemble. Une telle expression d'arrière-plan CSS peut enregistrer et optimiser le code du fichier CSS. Exemple :
background:url(bgimg.gif) no-repeat 5px 5px;
Explication comme indiqué ci-dessous :
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片设置</title>
<style>
.demo{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background: url(img/1.jpg);
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>Rendu :
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!