CSS3 Fond (Background)

Utilisez CSS3pour appliquer plusieurs fonds à un élément.

Utilisez CSS3Fond

CSS3a plusieurs nouvelles propriétés pour manipuler le fond des éléments, par exemple les coupes de fond, plusieurs fonds et les options d'ajustement de la taille du fond.

La section suivante vous présentera CSS3toutes les nouvelles fonctionnalités de fond, pour d'autres propriétés liées au fond, veuillez consulterArrière-plan CSStutoriel.

CSS3 background-Propriété size

ce background-La propriété size peut être utilisée pour spécifier la taille de l'image de fond. Dans CSS3Précédemment, la taille de l'image de fond était déterminée par la taille réelle de l'image. La taille de l'image de fond peut être spécifiée en pixels, en pourcentage ou en utilisant des mots-clés tels que auto, contain et cover. Les valeurs négatives ne sont pas autorisées.

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　background:　url("images/sky.jpg)　no-repeat;
　　　　background-size: contain;
　　　　border:　6px solide #333;
}

CSS3 background-Propriété clip

background-La propriété clip peut être utilisée pour spécifier si le fond de l'élément s'étend jusqu'au bord. La propriété background-La propriété clip peut prendre trois valeurs : border-box, padding-box, content-box。

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: orange;
　　　　background-clip: contenu-box;
}

Veuillez consulterModèle de boîte CSS教程，以了解有关元素盒子的更多信息。

CSS3 background-l'attribut origin

ce background-L'attribut origin peut être utilisé pour spécifier la zone de positionnement de l'image de fond. Il peut prendre les mêmes valeurs que background-Clip attribute: border-box, padding-box, content-box。

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background:　url("images/sky.jpg)　no-repeat;
　　　　background-size: contain;
　　　　background-origin: content-box;
}

CSS3plusieurs arrière-plans

CSS3vous permet de ajouter plusieurs arrière-plans à un seul élément. Les arrière-plans se superposent les uns aux autres. Le nombre de couches est déterminé parbackground-ou backgroundLe nombre de valeurs séparées par des virgules dans les attributs de raccourci détermine.

.box　{
　　　　width:　100%;
　　　　height:　500px;
　　　　background:　url("images/birds.png)　no-repeat center,　url("images/clouds.png)　　no-repeat center, lightblue;
}

background-“「birds.png」sera affiché en hautbackground-color.