So verwenden Sie CSS-Hintergrundgröße und Hintergrundposition

Beherrschen Sie die Fähigkeiten von CSS -Hintergrundbildgröße und -position, um problemlos ansprechende Layouts zu erstellen! In diesem Artikel werden die Eigenschaften background-size und background-position eingehend untersucht, um die Größe und Position von Hintergrundbildern flexibel zu steuern.

Kernpunkte:

Das Attribut
• background-size wird verwendet, um die Hintergrundbildgröße anzupassen, unterstützt Schlüsselwörter wie cover und contain sowie numerische Einheiten wie Pixel, EM und Prozentsätze.
Das Attribut
• background-position steuert die Position des Hintergrundbildes im Container und funktioniert am besten mit background-size: cover.
• background-position Sie können Schlüsselwörter (oben, unten, links, rechts, Mitte), Längenwert (PX, EM) oder prozentualer Wert verwenden, um eine genaue Bildpositionierung zu erreichen.
Die Kombination von
• background-size und background-position eignet sich besonders für Responsive -Layouts mit Änderungen der Behältergröße.

Praktische Übung:

Wir werden die Bilder von OIA, Santorini (400px x 600px) für die Demonstration verwenden.

In unserem Beispiel wird ein 300px x 200px <div> zentriert. <code><div> einen gelben Hintergrund haben, das Hintergrundbild steht über dem gelben Hintergrund. <p> Wenn Sie das Hintergrundbild direkt hinzufügen, wird nur ein Teil des Bildes angezeigt, da die Bildgröße größer als <code><div> ist. <p> <img src="https://img.php.cn/upload/article/000/000/000/173906287235522.jpg" alt="How to Use CSS background-size and background-position "> </p> Das Attribut <p> <code>background-size hilft uns, dieses Problem zu lösen.

Verwenden Sie background-size Hintergrundgröße:

Das Attribut

background-size enthält zwei Schlüsselwörter cover und contain sowie numerische Einheiten (PX, EM, %) und auto.

• background-size: contain;: Das Bild wird vollständig angezeigt, kann jedoch nicht mit dem Behälter gefüllt werden.

• background-size: cover;: Das Bild ist voll von Behältern, aber einige Bilder können zugeschnitten werden.

  

• Andere Werte: Verwenden Sie Prozentsatz- oder Pixelwerte, um die Bildgröße festzulegen. Achten Sie jedoch darauf, dass die Bildverformung zu vermeiden.

Verwenden Sie background-position die Hintergrundbildposition festlegen:

standardmäßig befindet sich die obere linke Ecke des Hintergrundbildes in der oberen linken Ecke des Behälters. Mit dem background-position Attribut können wir die Bildposition genau steuern.

• Schlüsselwörter: Verwenden Sie Schlüsselwortkombinationen und Positionierung mit top, bottom, left, right und anderen Schlüsselwörtern. center

• Längenwert: Verwenden Sie Pixel, EM und andere Längenwerte, um die Bildposition fein abzustimmen.

• Prozent Wert: Verwenden Sie den Prozentsatz Wert zur Position, Sie müssen die proportionale Beziehung in Bezug auf den Container verstehen.

  

Zusammenfassung:

und background-size Eigenschaften sind leistungsstarke Tools in CSS, insbesondere nützlich beim Erstellen reaktionsschneller Layouts. Die flexible Verwendung dieser beiden Attribute kann leicht verschiedene Hintergrundbildeffekte erzielen. background-position

Weitere Informationen finden Sie in der MDN -Dokumentation:

und background-size. Darüber hinaus wird empfohlen, die Eigenschaften background-position und object-fit zu lernen, die auch für Inline -Bilder geeignet sind. object-position

FAQs:

Wie lokalisiert ich das Hintergrundbild in der unteren rechten Ecke der Seite? Verwenden Sie
• . background-position: bottom right;
Kann das Hintergrundbild mit Prozentsatz positioniert werden? Ja,
• akzeptiert Prozentwerte. background-position
Wie kann das Hintergrundbild das gesamte Element abdecken? Verwenden Sie
• . background-size: cover; Der Unterschied zwischen
• und background-size: cover;? background-size: contain; Füllen Sie den Container, cover vollständige Anzeige. contain
unterstützt CSS mehrere Hintergrundbilder? Unterstützt, durch Kommas getrennt.

Ich hoffe, dieser Artikel kann Ihnen helfen, die CSS -Hintergrundbildgröße und die Positionseigenschaften besser zu verstehen und anzuwenden!