Maison > Article > interface Web > 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 debackground-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 : 🎜<pre class="brush:php;toolbar:false"><code class="css">div {
width: 200px;
height: 100px;
background-image: url("image.jpg");
background-size: cover;
background-position: 200px 100px;
}</code></pre>🎜🎜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!