Wenn wir die Stile anderer Websites untersuchen, stellen wir häufig fest, dass in vielen Hintergrundattributen dasselbe Bild verwendet wird, um die Nutzung verschiedener Teile der Webseite zu gewährleisten. Wenn Sie diese Art von Bild öffnen und einen Blick darauf werfen, werden Sie feststellen, dass dieses Bild viele kleine Bilder enthält, wie zum Beispiel:
Ein weiteres Beispiel:
Diese kleinen Bilder sind die Teile, nachdem das gesamte Bild aufgeteilt wurde. Jeder Teil wird auf einem Bild platziert, anstatt als separate Bilder gespeichert zu werden. Wir alle wissen, dass der Zweck darin besteht, die Anzahl der HTTP-Anfragen zu reduzieren und Zeit und Bandbreite zu sparen .
Wie kann man also erkennen, dass nur ein Teil eines Bildes an verschiedenen Stellen angezeigt wird? Dabei wird das Positionierungsproblem des Hintergrundbilds genutzt, über das wir heute sprechen werden. Ich glaube, dass viele Leute über dieses Problem deprimiert sind, und Freunde fragen mich oft, deshalb werde ich es heute systematisch erklären:
Wir wissen, dass bei Verwendung eines Bildes als Hintergrund das CSS so geschrieben werden sollte . Nehmen Sie den Div-Container als Es kann beispielsweise auch ein Körper sein. Der Hintergrund von td, p usw. ist derselbe.
Code: div{ Hintergrund: #FFF url(image) no-repeat behoben xy;} |
Die Hintergrundattributwerte hier sind:
#FFF Hintergrundfarbe: (Farbwert, der Ort, an dem das Hintergrundbild nicht abgedeckt ist, oder wenn dort ist kein Hintergrundbild (Hintergrundfarbe)
Bildhintergrundbild: (Hier ist die Adresse des Bildes)
Ob keine Wiederholung wiederholt wird: (Wenn das Bild kleiner als die Größe des Containers ist, wird das Bild standardmäßig wiederholt angeordnet, um den Container auszufüllen. Keine Wiederholung bedeutet keine Wiederholung. Erst zu diesem Zeitpunkt werden die nachfolgenden Positionierungskoordinaten angezeigt nützlich.)
Ob der feste Hintergrund mit dem Container scrollt: (Es gibt zwei optionale Werte: Scrollen scrollt, fest scrollt nicht, der Standardwert ist Scrollen)
Positionierung des xy-Hintergrundbilds: (Beachten Sie, dass die Positionierung nur unter Nichtwiederholung sinnvoll ist. Dies ist der heutige Schwerpunkt.)
Wir müssen einige Punkte bei der Positionierung des Hintergrundbilds klären:
1. Der erste der beiden Werte ist horizontale Positionierung, wir nennen es X-Achsen-Positionierung. Letzterer Wert ist die Längspositionierung, die wir Y-Achsenpositionierung nennen. Wenn nur ein Wert vorhanden ist, ist der Standardwert die Richtung der x-Achse. Zu diesem Zeitpunkt wird die Richtung der y-Achse standardmäßig nach oben und unten ausgerichtet, also in der Mitte.
2. Der Ursprung der Koordinatenachse ist der linke Scheitelpunkt des entsprechenden Containers.
3. Der y-Achsenpfeil dieser Koordinate zeigt nach unten, dh die xy-Werte in der unteren rechten Ecke (innerhalb des Containers) sind alle positiv.
4. Die xy-Werte repräsentieren jeweils den Wert des linken Scheitelpunkts des Hintergrundbilds relativ zum Koordinatenursprung (d. h. dem linken Scheitelpunkt des Containers).
5. Der Wert von xy kann als Prozentsatz oder px ausgedrückt werden.
6. xy kann auch durch die fünf Ausrichtungsmethoden „links, rechts, oben, unten, Mitte“ ausgedrückt werden. Beachten Sie jedoch: Wenn es durch „links, rechts, oben, unten, Mitte“ ausgedrückt wird, werden stattdessen die Ausrichtungsregeln angewendet als Koordinatenregeln . Wenn x links ist, bedeutet dies, dass die linke Seite des Bildes an der linken Seite des Containers ausgerichtet ist. Wenn es rechts ist, bedeutet dies, dass die rechte Seite des Bildes an der rechten Seite des Containers ausgerichtet ist , bedeutet dies, dass die Oberseite des Bildes an der Oberseite des Containers ausgerichtet ist. Wenn es unten ist, bedeutet dies, dass die Oberseite des Bildes an der Unterseite des Containers ausgerichtet ist. es bedeutet zentrierte Ausrichtung.
7. Wenn xy als Prozentsatz oder px ausgedrückt wird, kann sein Wert eine negative Zahl sein. Wir können die Bedeutung negativer Zahlen leicht verstehen, indem wir die Koordinatenregeln anwenden. Wenn x eine negative Zahl ist, bedeutet dies, dass sich der linke Scheitelpunkt des Bildes links vom linken Scheitelpunkt des Containers befindet. Dies bedeutet, dass der linke Scheitelpunkt des Bildes über dem linken Fixpunkt des Containers liegt. Das heißt, nach links und oben über den Umfang des Containers hinaus.
Im Folgenden verwende ich einige Abbildungen, um verschiedene Situationen zu veranschaulichen . Der blaue Block stellt das Bild dar und das gepunktete Feld stellt den Container dar (es kann div, td oder direkt body sein). . Ich verwende Weiß. Zeigt den sichtbaren Teil an, und was außerhalb des Containerbereichs liegt, ist unsichtbar. Die Koordinaten des linken Fixpunkts des Containers sind (0, 0).
Das erste ist, dass das Hintergrundbild oben links am Inhalt ausgerichtet ist. 0px 0px kann auch als links oben geschrieben werden
Im zweiten Bild befindet sich das Hintergrundbild in der Mitte des Containers und die Festpunktkoordinaten sind positive Werte.
Im dritten Bild befindet sich das Hintergrundbild oben links im Container und die Festpunktkoordinaten sind negativ
------------------------- --------- --------------------------
An diesem Punkt verstehen wir möglicherweise, wie der Positionierungswert im Hintergrund verwendet wird, um ein Hintergrundbild genau zu positionieren. Schauen wir uns noch einmal die beiden am Anfang eingeführten Bilder an. Wir können Folgendes verwenden: Hintergrundpositionierung und nur innerhalb des Containers sichtbar . Eigenschaften, um einen bestimmten Teil des gesamten Bildes nach Belieben aufzurufen.
Um das Aufrufen zu erleichtern, müssen wir beim Anordnen dieser kleinen Bilder jedoch einige Regeln beachten. Beispielsweise entspricht der Abstand zwischen kleinen Bildern normalerweise der Größe des Containers, in dem die kleinen Bilder aufgerufen werden, oder der Abstand ist größer. um zu vermeiden, dass sie im Container angezeigt werden. Zeigen Sie uns Bilder, die wir nicht zeigen möchten!
Wenn die Positionierung außerdem Prozentsätze verwendet, ist der Algorithmus etwas Besonderes. Lassen Sie mich ein Beispiel geben:
Code: Hintergrund: #FFF URL (Bild) keine Wiederholung festgelegt 50% -30%. |
Wo sollte sich das Bild zu diesem Zeitpunkt wie folgt befinden:
die Koordinatenposition des linken Scheitelpunkts des Bildes vom linken Scheitelpunkt des Containers für
x: (Breite des Containers – Breite des Bildes) x50 %
y: (Höhe des Containers – Höhe des Bildes) x (-30 %)
Das erhaltene Ergebnis wendet die Koordinatenregel an. Wenn die Differenz negativ und der Prozentsatz positiv ist, ist das Ergebnis der Operation negativ. Wenn die Differenz negativ ist und der Prozentsatz negativ ist, ist das Ergebnis positiv. Alles in allem entspricht die Operation hier dem Algorithmus. Indem Sie das Ergebnis der Operation in die Koordinatenregel einbringen, können Sie die Position des Bildes ermitteln.
Beispiel: Der Container ist 600 Pixel breit und das Bild ist 200 Pixel breit.
Mit dem obigen Stil können wir die Bildposition wie folgt ermitteln:
x: (600px-200px)*50%
y: (600px-200px)*(-30%)
Wie unten gezeigt:
