Heim > Artikel > Web-Frontend > So verwenden Sie die Hintergrundposition der Hintergrundbildposition in CSS
So verwenden Sie die Hintergrundposition der Hintergrundbildposition in CSS
- yuliaOriginal
- 2018-09-07 12:02:476156Durchsuche
Bei der Verwendung von Hintergrundbildern stellen wir oft fest, dass die Position des Hintergrundbilds nicht unseren Wünschen entspricht. Wie legen wir also die Position des Hintergrundbilds fest? Im Folgenden wird die Verwendung der Hintergrundposition der Hintergrundbildposition in CSS vorgestellt.
Im Attribut „Hintergrundbildposition“ des Hintergrundbilds wird die Hintergrundposition verwendet, um die Position des Hintergrundbilds des Elements zu steuern. Es werden drei Werte akzeptiert:
Schlüsselwörter: wie oben, rechts, unten, links, Mitte
Längenwert; wie px, em, rem usw.
Prozentwert: %
Allgemein Die am häufigsten verwendeten oder am besten verstandenen Werte sind Schlüsselwörter und Längenwerte, und die am häufigsten verwendeten Prozentsätze sind 0 %, 50 % und 100 %.
Im Hintergrundbildpositionsattribut gibt es im Allgemeinen zwei Attributwerte. Der erste stellt die horizontale Position dar, die die X-Achse ist, und der zweite stellt die vertikale Position dar, die die Y-Achse ist Werte zum Definieren der Startposition des Hintergrundbilds. Ein Wert kann verwendet werden, wenn die Startposition in beide Richtungen gleich ist.
Die Bedeutung einiger Attributwerte ist wie folgt:
oben: Die Anfangsposition des Hintergrundbilds ist die Oberseite des Elements
Mitte: Das Startposition des Hintergrundbilds ist die Mitte des Elements
links: Die Startposition des Hintergrundbilds befindet sich auf der linken Seite des Elements
rechts: Die Startposition des Hintergrundbilds befindet sich auf der rechten Seite des Elements
unten: Die Startposition des Hintergrundbilds befindet sich auf der Unterseite des Elements
Beispiel: Position des Hintergrundbilds nach links und unten festlegen und legen Sie fest, dass das Hintergrundbild nicht gekachelt ist.
<!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>Rendering:
Das Obige ist eine kurze Einführung in die Hintergrundposition, ich hoffe, es wird hilfreich sein zu dir!
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Hintergrundposition der Hintergrundbildposition in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!