Maison >interface Web >tutoriel CSS >Comment ajuster la position de l'image en CSS

Comment ajuster la position de l'image en CSS

藏色散人original: 2020-12-15 10:40:2125589parcourir

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.

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>

<.>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>

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!

firefox css css3 Static 继承 position background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment décompresser des fichiers CSSArticle suivant：Comment décompresser des fichiers CSS

Articles Liés

Voir plus