Maison > Article > interface Web > Comment définir l'image d'arrière-plan en CSS
Comment définir l'image d'arrière-plan en CSS
- 青灯夜游original
- 2021-11-09 14:17:2872869parcourir
Comment définir l'image d'arrière-plan sur CSS : 1. Utilisez l'attribut background-image, la syntaxe "background-image:url (picture url);" 2. Utilisez l'attribut background, la syntaxe "background:url (picture url);" URL);" .
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, vous pouvez définir l'image d'arrière-plan via l'attribut background-image ou l'attribut background.
L'attribut background-image est utilisé pour définir l'image d'arrière-plan d'un élément ; l'arrière-plan d'un élément est 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.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 450px;
height: 360px;
background-image: url(img/1.jpg);
background-size: 450px;/*设置图片大小*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
L'attribut background est un attribut raccourci qui peut définir tous les attributs d'arrière-plan dans une seule instruction, notamment :
background-color spécifie la couleur d'arrière-plan à utiliser
background-position spécifie l'image d'arrière-plan La position de
background-size spécifie la taille de l'image d'arrière-plan
background-repeat précise 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 l'image d'arrière-plan Zone de peinture
background-attachment Définit si l'image d'arrière-plan est fixe ou défile avec le reste de la page
background-image Spécifie une ou plusieurs images d'arrière-plan à utiliser
Exemple :
div {
width: 450px;
height: 360px;
background: url(img/2.jpg);
background-size: 450px;/*设置图片大小*/
}
(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)
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!