Quels sont les nouveaux attributs d’arrière-plan en CSS3 ?

Trois nouveaux attributs d'arrière-plan ont été ajoutés à CSS3 : 1. background-clip, qui spécifie la zone où l'image d'arrière-plan de l'objet est découpée vers l'extérieur ; 2. background-origin, qui spécifie l'endroit où l'image d'arrière-plan commence à être affichée ; 3. background-size, qui spécifie la taille de l'image d'arrière-plan.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

css3 nouvel attribut d'arrière-plan

Property	Description	CSS
background-clip	Spécifie la zone où l'image d'arrière-plan de l'objet est découpée vers l'extérieur.	3
background-origin	Définissez ou récupérez l'origine de référence (position) de l'image d'arrière-plan de l'objet lors du calcul de la position d'arrière-plan.	3
background-size	Récupère ou définit la taille de l'image d'arrière-plan de l'objet.	3

1. background-size : Spécifiez la taille de l'image d'arrière-plan

Avant CSS3, la taille de l'image d'arrière-plan était déterminée par la taille réelle de l'image. En CSS3, vous pouvez spécifier la taille de l'image d'arrière-plan, ce qui nous permet de réutiliser l'image d'arrière-plan dans différents environnements. Vous pouvez spécifier les dimensions en pixels ou en pourcentages. Si les dimensions sont spécifiées sous forme de pourcentage, elles sont relatives à la largeur et à la hauteur de l'élément parent.

div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

2. background-origin : Spécifiez où commencer à afficher l'image d'arrière-plan

L'image d'arrière-plan peut être placée dans la zone de contenu, de remplissage ou de bordure.

div{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

3. background-clip : Spécifiez où commencer à recadrer l'image d'arrière-plan

div{
background-color:yellow;
background-clip:content-box;
}

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS, Tutoriel d'introduction au front-end Web)

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!