Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Was bedeutet Cover in CSS?

下次还敢
Freigeben: 2024-04-28 12:24:14
Original
389 Leute haben es durchsucht

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.

Was bedeutet Cover in CSS?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!