Comment ajuster la position de l'image en CSS-tutoriel CSS-php.cn

Comment ajuster la position de l'image en CSS

藏色散人

Libérer： 2023-01-04 09:37:27

original

25467 Les gens l'ont consulté

Méthode pour ajuster la position de l'image en CSS : 1. Utilisez l'attribut position pour contrôler la position de l'image introduite par la balise "" 2. Utilisez l'attribut "background-position" ; pour définir la position de départ de l’image d’arrière-plan.

Comment ajuster la position de l'image en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

Jetons un coup d'œil à l'explication détaillée de la méthode de contrôle de la position de l'image avec CSS :

1 Utilisez l'attribut position pour contrôler la position de l'image

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>css控制图片位置</title>
</head>
<body>
<div style="width:500px;height:400px;border:1px solid red;position:relative;">
<img  src="img/4.jpg"   style="max-width:90%"/ alt="Comment ajuster la position de l'image en CSS" >
</div>
</body>
</html>

Copier après la connexion

<. 🎜>L'effet est le suivant

Comment ajuster la position de limage en CSS

L'attribut position spécifie le type de positionnement de l'élément.

Cet attribut définit le mécanisme de positionnement utilisé pour établir la disposition de l'élément. N'importe quel élément peut être positionné, mais les éléments absolus ou fixes génèrent une boîte au niveau du bloc, quel que soit le type de l'élément lui-même. Un élément positionné relativement est décalé par rapport à sa position par défaut dans un écoulement normal.

Valeur de l'attribut :

absolute génère un élément en position absolue, positionné par rapport au premier élément parent autre que le positionnement statique. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

fixed génère un élément positionné de manière absolue, positionné par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

relative génère un élément relativement positionné, positionné par rapport à sa position normale. Par conséquent, "left:20" ajoute 20 pixels à la position GAUCHE de l'élément.

Valeur statique par défaut. Sans positionnement, l'élément apparaît dans un flux normal (en ignorant les déclarations haut, bas, gauche, droite ou z-index).

inherit spécifie que la valeur de l'attribut position doit être héritée de l'élément parent.

2. L'attribut background-position définit la position de départ de l'image d'arrière-plan.

<html>
<head>
<style type="text/css">
body
{ 
  background-image:url(&#39;/i/eg_bg_03.gif&#39;);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
</style>
</head>
<body>
<body>
<p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，
才能保证该属性在 Firefox 和 Opera 中正常工作。</p>
</body>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

Comment ajuster la position de limage en CSS

L'attribut background-position définit la position de départ de l'image d'arrière-plan.

Cet attribut définit la position de l'image d'arrière-plan d'origine (définie par background-image). Si l'image d'arrière-plan doit être répétée, elle partira de ce point.

Conseil : Vous devez définir la propriété background-attachment sur "fixed" pour vous assurer que cette propriété fonctionne correctement dans Firefox et Opera.

Recommandé : "

Tutoriel vidéo CSS"

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!