So passen Sie die Bildposition in CSS an-CSS-Tutorial-php.cn

So passen Sie die Bildposition in CSS an

藏色散人

Freigeben： 2023-01-04 09:37:27

Original

25528 Leute haben es durchsucht

So passen Sie die Position des Bildes in CSS an: 1. Verwenden Sie das Positionsattribut, um die durch das Tag „“ eingeführte Position des Bildes zu steuern. 2. Verwenden Sie das Attribut „background-position“, um die Startposition festzulegen das Hintergrundbild.

So passen Sie die Bildposition in CSS an

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

Sehen wir uns die detaillierte Erklärung der Methode zur Steuerung der Bildposition mit CSS an:

1. Verwenden Sie das Positionsattribut, um die Position des Bildes zu steuern

<!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="So passen Sie die Bildposition in CSS an" >
</div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt

So passen Sie die Bildposition in CSS an

Das Positionsattribut gibt den Positionierungstyp des Elements an.

Dieses Attribut definiert den Positionierungsmechanismus, der zum Festlegen des Layouts des Elements verwendet wird. Jedes Element kann positioniert werden, aber absolute oder feste Elemente erzeugen eine Box auf Blockebene, unabhängig vom Typ des Elements selbst. Ein relativ positioniertes Element wird im normalen Fluss von seiner Standardposition versetzt.

Attributwert:

absolute generiert ein absolut positioniertes Element, das im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert ist. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

fixed generiert absolut positionierte Elemente, die relativ zum Browserfenster positioniert sind. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

relative Erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist. Daher fügt „left:20“ 20 Pixel zur LINKEN Position des Elements hinzu.

statischer Standardwert. Ohne Positionierung erscheint das Element im normalen Fluss (oben, unten, links, rechts oder Z-Index-Deklarationen werden ignoriert).

inherit gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt werden soll.

2. Das Attribut „Hintergrundposition“ legt die Startposition des Hintergrundbilds fest.

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

So passen Sie die Bildposition in CSS an

Die Eigenschaft „Hintergrundposition“ legt die Startposition des Hintergrundbilds fest.

Dieses Attribut legt die Position des ursprünglichen Hintergrundbilds fest (definiert durch „Hintergrundbild“). Wenn das Hintergrundbild wiederholt werden soll, beginnt es an dieser Stelle.

Tipp: Sie müssen die Eigenschaft „background-attachment“ auf „fixed“ setzen, um sicherzustellen, dass diese Eigenschaft in Firefox und Opera ordnungsgemäß funktioniert.