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:
Hinweise
Folgendes ist bei der Verwendung von Cover zu beachten:
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!