Que signifie couvrir en CSS

cover en CSS spécifie que l'image d'arrière-plan recouvre complètement le conteneur et conserve le rapport hauteur/largeur d'origine. Il doit être utilisé comme valeur de l'attribut de taille d'arrière-plan lorsqu'il est utilisé, et peut également être utilisé avec contain pour empêcher la déformation de l'image. Les scénarios applicables incluent des arrière-plans plein écran, des zones de héros et des curseurs, mais sachez que les images peuvent être étirées, recadrées ou floues.

Signification de cover en CSS

cover est un mot-clé en CSS utilisé pour définir la propriété de l'image d'arrière-plan, qui spécifie que l'image couvrira complètement le conteneur tout en conservant le rapport hauteur/largeur d'origine de l'image. Cela signifie que l'image sera étirée ou réduite pour remplir le conteneur sans être recadrée ou déformée.

Comment utiliser cover

Lorsque vous utilisez cover, vous devez le spécifier comme valeur de l'attribut background-size :

<code class="css">background-size: cover;</code>

Vous pouvez également l'utiliser avec contain, qui spécifie que l'image sera mise à l'échelle pour remplir le conteneur, mais ne dépassera pas son rapport hauteur/largeur d'origine, ce qui empêche l'image d'être étirée et déformée :

<code class="css">background-size: contain;</code>

Quand utiliser cover

cover convient aux situations où l'image d'arrière-plan doit recouvrir complètement le conteneur, comme comme :

• Arrière-plan plein écran : Utilisez la couverture pour créer une image d'arrière-plan plein écran qui s'adaptera automatiquement à différentes tailles d'écran.
• Zone des héros : La zone des héros contient généralement une image grande et accrocheuse, l'utilisation d'une couverture garantit que l'image remplit complètement la zone tout en conservant son rapport hauteur/largeur.
• Curseur : Les composants du curseur utilisent généralement une couverture pour garantir que l'image recouvre complètement la zone du curseur.

Remarques

Les éléments suivants doivent être notés lors de l'utilisation de la couverture :

• L'image peut être étirée ou rétrécie, ce qui peut réduire la qualité de l'image.
• Si le rapport hauteur/largeur de l'image est différent du rapport hauteur/largeur du conteneur, l'image sera étirée ou recadrée pour s'adapter au conteneur.
• Dans certains cas, la couverture rendra l'image floue.

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!