Heim >Web-Frontend >CSS-Tutorial >Verwendung der CSS-Eigenschaft „Hintergrundposition'.
Bitte sagen Sie mirHintergrundposition: left -29px; Was bedeutet das? ? Auf den ersten Blick dachte ich, es wären -29 Pixel nach links verschoben, aber als ich es getestet habe, war das nicht der Fall. Fragen Sie die Experten
wird verwendet, um die Position des Bildes zu lokalisieren.
Es wird hauptsächlich verwendet, wenn sich mehrere Logos oder Icos auf einem PNG befinden. Zu diesem Zeitpunkt wird die Hintergrundposition verwendet: x y x ist gleich der parallelen Achse und y ist gleich der vertikalen Achse .
Der Wert von x y kann eine positive oder eine negative Zahl sein
.btn{ background:url(bg.png); background-repeat:no-repeat; background-position:-25px -374px; height:16px; width:24px; }Der Effekt ist wie folgt: Auf diese Weise wird das kleine Bild ausgeschnitten! Halten Sie es einfach! ! Lassen Sie mich zunächst das Problem erklären. Auf dem Bild steht eine +1, und auf den Hyperlink habe ich eine +1 geschrieben. Dies liegt daran, dass der Textinhalt oft nicht auf dem Bild steht unflexibel. Um allen eine vollständige Demonstration zu geben, hat Xiaocai noch eine +1 geschrieben und wird sich als nächstes damit befassen! Die erste Zentrierung ist in horizontale Zentrierung und vertikale Zentrierung unterteilt.
Hyperlink erfordert die Einstellung text-align:center gilt für untergeordnete Knoten; für einen Hyperlink in einem vertikal zentrierten Div müssen Sie nur das Attribut line-height des a-Tags auf die gleiche Höhe wie das Div festlegen. Der Stil ist wie folgt:
.btn{ background:url(bg.png); background-repeat:no-repeat; background-position:-25px -374px; height:16px; width:24px; text-align:center; } .btn a{ line-height:16px; }Der Effekt ist wie folgt: Diese Technik hat Vor- und Nachteile. Der Vorteil liegt darin, dass die Bilder werden alle zusammengefügt, nur bei der Anforderung Es ist notwendig, ein Bild anzufordern, was die Anzahl der Interaktionen mit dem Server verringert und auch das Problem des verzögerten Ladens durch Schweben lösen kann. Der Nachteil besteht darin, dass es schwer zu kontrollieren ist und die Skalierbarkeit nicht sehr gut ist. Wenn es in Zukunft Änderungen gibt, kann man sagen, dass es sich auf den gesamten Körper auswirkt und es aufgrund unterschiedlicher Bildschirmauflösungen manchmal zu Hintergrundunterbrechungen kommt.
Das obige ist der detaillierte Inhalt vonVerwendung der CSS-Eigenschaft „Hintergrundposition'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!