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

Maison

interface Web

tutoriel CSS

Comment ajuster la position de l'image en CSS

Dec 15, 2020 am 10:40 AM

css

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="/static/imghw/default1.png"  data-src="img/4.jpg"  class="lazy"     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!

Déclaration de ce site Web

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