So positionieren Sie Div basierend auf Bildern in CSS

In CSS können Sie die Position des Bildes im DIV über das Attribut „Hintergrundposition“ steuern. Die spezifischen Schritte sind wie folgt: Horizontale Positionierung: Der erste Wert von „Hintergrundposition“ ist die Breite des Bildes. Vertikale Positionierung: Der zweite Wert der Hintergrundposition ist die Bildhöhe. Gleichzeitige Positionierung: Die Hintergrundposition legt gleichzeitig die Breiten- und Höhenwerte fest.

Mit CSS ein DIV so positionieren, dass es mit der Bildposition übereinstimmt

In CSS können Sie das Attributbackground-positionverwenden, um die Position des Bildes innerhalb des div-Elements zu steuern . Diese Eigenschaft akzeptiert zwei Werte: Der erste steuert die horizontale Position des Bildes und der zweite steuert seine vertikale Position. Die Einheit kann Pixel (px), Prozentsatz (%) oder Schlüsselwörter (left,center,right,oben,unten).background-position属性来控制图像在 div 元素内的位置。该属性接受两个值：第一个值控制图像的水平位置，第二个值控制其垂直位置。单位可以是像素 (px)、百分比 (%) 或关键字 (left、center、right、top、bottom）。

水平定位

要根据图像水平定位 div，可以将background-position的第一个值设置为图像的宽度。例如，如果图像宽度为 200px，则 CSS 代码为：

div { width: 200px; height: 100px; background-image: url("image.jpg"); background-size: cover; background-position: 200px 0; }

垂直定位

要根据图像垂直定位 div，可以将background-position

Horizontale Positionierung

div { width: 200px; height: 100px; background-image: url("image.jpg"); background-size: cover; background-position: 0 100px; }

<code class="css">div { width: 200px; height: 100px; background-image: url("image.jpg"); background-size: cover; background-position: 200px 100px; }</code>

Das obige ist der detaillierte Inhalt vonSo positionieren Sie Div basierend auf Bildern in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!