Was bedeutet Cover in CSS?

cover in CSS gibt an, dass das Hintergrundbild den Container vollständig abdeckt und das ursprüngliche Seitenverhältnis beibehält. Es muss bei Verwendung als Wert des Hintergrundgrößenattributs verwendet werden und kann auch mit „Contain“ verwendet werden, um eine Bildverformung zu verhindern. Zu den anwendbaren Szenarien gehören Vollbildhintergründe, Heldenbereiche und Schieberegler. Beachten Sie jedoch, dass Bilder gestreckt, beschnitten oder unscharf sein können.

Bedeutung von cover in CSS

cover ist ein Schlüsselwort in CSS, das zum Festlegen der Hintergrundbildeigenschaft verwendet wird, die angibt, dass das Bild den Container vollständig abdeckt und dabei das ursprüngliche Seitenverhältnis des Bildes beibehält. Das bedeutet, dass das Bild gestreckt oder verkleinert wird, um den Container auszufüllen, ohne dass es beschnitten oder verzerrt wird.

So verwenden Sie cover

Wenn Sie cover verwenden, müssen Sie es als Wert des Attributs „background-size“ angeben:

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

Sie können es auch mit „contain“ verwenden, das angibt, dass das Bild auf die Füllung skaliert wird Der Container wird jedoch nicht über das ursprüngliche Seitenverhältnis hinaus angezeigt, wodurch verhindert wird, dass das Bild gedehnt und verformt wird:

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

Wann man eine Abdeckung verwenden sollte

Die Abdeckung eignet sich für Situationen, in denen das Hintergrundbild den Behälter vollständig abdecken muss, z als:

• Vollbild-Hintergrund: Verwenden Sie Cover, um ein Vollbild-Hintergrundbild zu erstellen, das automatisch an verschiedene Bildschirmgrößen angepasst wird.
• Hero-Bereich: Der Hero-Bereich enthält normalerweise ein großes und auffälliges Bild. Durch die Verwendung von Cover wird sichergestellt, dass das Bild den Bereich vollständig ausfüllt und gleichzeitig sein Seitenverhältnis beibehält.
• Slider: Slider-Komponenten verwenden normalerweise eine Abdeckung, um sicherzustellen, dass das Bild den Slider-Bereich vollständig abdeckt.

Hinweise

Folgendes ist bei der Verwendung von Cover zu beachten:

• Das Bild kann gestreckt oder verkleinert werden, was die Bildqualität beeinträchtigen kann.
• Wenn das Seitenverhältnis des Bildes vom Seitenverhältnis des Containers abweicht, wird das Bild gestreckt oder zugeschnitten, damit es in den Container passt.
• In einigen Fällen führt die Abdeckung dazu, dass das Bild unscharf wird.

Das obige ist der detaillierte Inhalt vonWas bedeutet Cover in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!