Comment positionner div en fonction des images en CSS

En CSS, vous pouvez contrôler la position de l'image dans le DIV via l'attribut background-position. Les étapes spécifiques sont les suivantes : Positionnement horizontal : La première valeur de background-position est la largeur de l'image. Positionnement vertical : la deuxième valeur de background-position est la hauteur de l'image. Positionnement simultané : background-position définit les valeurs de largeur et de hauteur en même temps.

Utiliser CSS pour positionner un DIV afin qu'il corresponde à la position de l'image

En CSS, vous pouvez utiliser l'attribut background-position pour contrôler la position de l'image dans l'élément div . Cette propriété accepte deux valeurs : la première contrôle la position horizontale de l'image et la seconde contrôle sa position verticale. L'unité peut être des pixels (px), un pourcentage (%) ou des mots-clés (gauche, centre, droite, haut, bas). 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

Positionnement horizontal

Pour positionner un div horizontalement en fonction d'une image, définissez la première valeur de background-position sur la largeur de l'image. Par exemple, si la largeur de l'image est de 200 px, le code CSS serait :

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

🎜Positionnement vertical🎜🎜🎜Pour positionner le div verticalement en fonction de l'image, vous pouvez définir la deuxième valeur de background-position code> à celui de l’image haute. Par exemple, si la hauteur de l'image est de 100 px, le code CSS serait : 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copier après la connexion</div></div>🎜🎜Positionnement simultané🎜🎜🎜Pour positionner un div en fonction à la fois de la position horizontale et verticale de l'image, vous pouvez définir les deux valeurs sur dimensions de l'image correspondantes. Par exemple : 🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!