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 Attribut background-position verwenden, 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

Um ein Div basierend auf einem Bild horizontal zu positionieren, legen Sie den ersten Wert von background-position auf die Breite des Bildes fest. Wenn die Bildbreite beispielsweise 200 Pixel beträgt, lautet der CSS-Code:

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

🎜Vertikale Positionierung🎜🎜🎜Um das Div basierend auf dem Bild vertikal zu positionieren, können Sie den zweiten Wert von background-position zu dem des Bildes hoch. Wenn die Bildhöhe beispielsweise 100 Pixel beträgt, lautet der CSS-Code: 🎜

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

🎜🎜Gleichzeitige Positionierung🎜🎜🎜Um ein Div basierend auf der horizontalen und vertikalen Position des Bildes zu positionieren, können Sie beide Werte festlegen entsprechenden Bildabmessungen. Zum Beispiel: 🎜rrreee

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!