Wie Sie das Hintergrund Bild Standort-Hintergrundposition in CSS verwenden

Quelle: Internet
Autor: Benutzer
Verwendung von Hintergrundbildern, Sie oft Begegnung die Position des Hintergrundbildes ist nicht das, was wir wollen, wie die Position des Hintergrundbildes festlegen? Hier ist eine Beschreibung der Verwendung der Hintergrund Bild Lage Hintergrund-Position in CSS.
Das Hintergrund Bild Location-Eigenschaft des Hintergrundbildes ist Background-Position die Position verwendet, um das Hintergrundbild des Elements zu steuern. Es übernimmt die drei Bedeutungen:

Schlüsselwörter: wie oben, nach unten, unten, links, Mitte
Längenwerte, wie PX, EM, REM.
Prozent Ergebnis: %
In der Regel die am häufigsten verwendeten Werte oder am bekanntesten, Keyword und Länge Werte, sind Prozentsätze der am häufigsten verwendeten 0 %, 50 % und 100 %.
In das Hintergrund Bild Standortattribut, der Wert der Eigenschaft ist in der Regel 2, die erste stellt die transversale Position, ist die x-Achse, die zweite stellt die longitudinalen Position, d. h. der y-Achse, verwendet zwei Eigenschaftswerte definieren die Ausgangsposition des Hintergrundbildes, wenn die Ausgangsposition der beiden Richtungen gleich ist, können Sie einen Wert verwenden.

Einige dieser Eigenschaftswerte haben der folgenden Bedeutungen:

Oben: Die ursprüngliche Position des Hintergrundbildes ist den oberen Rand des Elements

Mitte: Die Ausgangsposition des Hintergrundbildes ist die Mitte des Elements

Links: Die Ausgangsposition des Hintergrundbildes ist die linke Seite des Elements

Rechts: Die Ausgangsposition des Hintergrundbildes ist die Seite des Elements

Unten: Die Ausgangsposition des Hintergrundbildes ist die Unterseite des Elements

Beispiel: Legen Sie den Speicherort des Hintergrundbildes nach links und nach unten, beim Definieren der unebenen Pflasterung des Hintergrundbildes.

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">   div{width: 200px;height: 200px;border:1px solid #ccc;background: url(img/gift2x.png) no-repeat left bottom;}  </style> </head> <body>  <div></div> </body></html>

:

Das oben genannte ist eine kurze Einführung von Background-Position, ich hoffe, Ihnen zu helfen!

Kontaktiere uns

Die Inhaltsquelle dieser Seite ist aus dem Internet, und vertritt nicht die Meinung von Alibaba Cloud; auf dieser Seite erwähnte Produkte und Dienstleistungen haben keine Beziehung zu Alibaba Cloud. Wenn der Inhalt der Seite Ihrer Meinung nach verwirrend ist, schreiben sie uns bitte eine E-Mail. Wir werden das Problem innerhalb von 5 Tagen nach Erhalt Ihrer E-Mail bearbeiten.

Wenn Sie Fälle von Plagiaten aus der Community feststellen, senden Sie bitte eine E-Mail an info-contact@alibabacloud.com und legen Sie entsprechende Beweise vor. Ein Mitarbeiter wird Sie innerhalb von 5 Werktagen kontaktieren.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.