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 代码为：

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

垂直定位

要根据图像垂直定位 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:

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

🎜Vertikale Positionierung🎜🎜🎜Um das Div basierend auf dem Bild vertikal zu positionieren, können Sie den zweiten Wert von background-position festlegen. code> zu dem des Bildes hoch. Wenn die Bildhöhe beispielsweise 100 Pixel beträgt, lautet der CSS-Code: 🎜<pre class="brush:php;toolbar:false">&lt;code class=&quot;css&quot;&gt;div { width: 200px; height: 100px; background-image: url(&quot;image.jpg&quot;); background-size: cover; background-position: 200px 100px; }&lt;/code&gt;</pre>🎜🎜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!