Auszug aus der Arbeit anderer Leute ~~~ Sehr gute Sachen Grammatik:
Hintergrundposition: Länge ||
Hintergrundposition: Position ||. Positionswert
:
Länge: Prozent |. Ein Längenwert, der aus einer Gleitkommazahl und einer Einheitenkennung besteht.
Position: oben |. unten |
.
Legt die Hintergrundbildposition des Objekts fest oder ruft sie ab. Das Attribut „Hintergrundbild“ muss zuerst angegeben werden. Diese Eigenschaftspositionierung wird durch die Abstandseinstellung des Objekts nicht beeinflusst.
Der Standardwert ist: 0 % 0 %. Zu diesem Zeitpunkt wird das Hintergrundbild ohne Polsterung in der oberen linken Ecke des Inhaltsbereichs des Objekts positioniert.
Wenn nur ein Wert angegeben ist, wird dieser Wert für die Abszisse verwendet. Die Ordinate wird standardmäßig auf 50 % eingestellt. Werden zwei Werte angegeben, wird der zweite Wert für die Ordinate verwendet.
Wenn der Einstellwert rechts in der Mitte ist, wird das Hintergrundbild rechts positioniert, da der Abszissenwert den Mittelwert überschreibt.
Die entsprechende Skripteigenschaft ist backgroundPosition.
Hintergrundposition – definiert den Positionswert
des Hintergrundbilds:
[ <Prozentsatz> |. links |.
* Ebene
links: links
Mitte: mittel
richtig: richtig
* vertikal
oben: an
Mitte: mittel
unten: weiter
* Kombination aus Vertikal und Horizontal
x-% y-%
x-pos y-pos
Anfangswert: 0 % 0 %
Erbschaft: Nein
Gilt für: alle Elemente
Hintergrund: Hintergrund.Position: Position ***************************** Wichtige Punkte zur Erklärung: <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="UTF-8">
<Kopf>
<title>Problem bei der Positionierung der Hintergrundposition</title>
<style type="text/css">
<!--
*{
Rand:0;
Polsterung:0;
}
Körper {
text-align:center;
Hintergrund:#000;
}
#container{
Breite: 1000 Pixel;
Rand:0 automatisch;
Hintergrund:#fff url(images/bg.jpg) no-repeat links oben;
Höhe:500px;
}
->
</style>
</head>
<Körper>
<div id="container"> </div>
</body>
</html>1.background-position:left top; (siehe Abbildung 1) wird an der oberen linken Ecke des Containers ausgerichtet und der überschüssige Teil ausgeblendet. Entspricht background-position:0,0; entspricht auch background-position:0%,0%;2.background-position:right unten; Die untere rechte Ecke des Hintergrundbilds wird an der unteren rechten Ecke des Containers ausgerichtet und der überschüssige Teil wird ausgeblendet. Entspricht der Hintergrundposition: 100 %, 100 % entspricht auch der Hintergrundposition: Die Breite des Containers (Container) – die Breite des Hintergrundbilds, die Höhe des Containers (Container) – die Höhe des Hintergrundbilds 3. Hintergrundposition: 500px 15px ;(Siehe Abbildung 3). Das Hintergrundbild wird von der oberen linken Ecke des Containers um 500 Pixel nach rechts und 15 Pixel nach unten verschoben und der überschüssige Teil wird ausgeblendet. 4.Hintergrundposition:-500px -15px (siehe Abbildung 4). Das Hintergrundbild wird von der oberen linken Ecke des Containers um 500 Pixel nach links und 15 Pixel nach oben verschoben und der überschüssige Teil wird ausgeblendet. 5.Hintergrundposition:50% 50% (siehe Abbildung 5). Entspricht links: {Breite des Containers - Breite des Hintergrundbilds}*Linker Prozentsatz, der überschüssige Teil wird ausgeblendet. Entspricht rechts: {Höhe des Containers (Container) - Höhe des Hintergrundbilds}*rechter Prozentsatz, der überschüssige Teil wird ausgeblendet. Zum Beispiel: Hintergrundposition: 50 % 50 %; d. h. Hintergrundposition: (1000-2000)*50 %px, (500-30)*50 %px; ; Das heißt, das Hintergrundbild wird von der oberen linken Ecke des Containers um 500 Pixel nach links und um 235 Pixel nach unten verschoben. 6. (In diesem Fall sollte das Hintergrundbild bg2.jpg sein, um den Effekt zu sehen. Die Höhe von bg.jpg ist zu klein und der Effekt ist nicht offensichtlich) Hintergrundposition :-50% -50% (siehe Abbildung 6). Entspricht links: -{{Breite des Containers (Container) - Breite des Hintergrundbilds}*Linker Prozentsatz (alle Prozentsätze sind positive Werte)}, und der überschüssige Teil wird ausgeblendet. Entspricht rechts: -{{Höhe des Containers (Container) - Höhe des Hintergrundbilds}*rechter Prozentsatz (alle Prozentsätze sind positive Werte)}, und der überschüssige Teil wird ausgeblendet. Beispiel: Hintergrundposition:-50% -50% ist Hintergrundposition:-{(1000-500)*50%}px,-{(500-360)*50%}px ist Hintergrundposition: - 250px, -70px; das heißt, das Hintergrundbild bewegt sich von der oberen linken Ecke des Containers um 250px nach links und um 70px nach oben;