Wie erstelle ich in CSS ein Hintergrundbild in voller Breite?

Erzielen eines Hintergrundbilds in voller Breite in CSS

In der Webentwicklung kann die Erweiterung des Hintergrundbilds über die gesamte Breite eines Elements ein Problem sein gemeinsame Anforderung. Dies ist nützlich, um optisch ansprechende Layouts zu erstellen und eine konsistente Ästhetik zu etablieren. Um dies zu erreichen, ändern wir den bereitgestellten CSS-Code:

<code class="css">.style1 {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}</code>

Erklärung:

• background-size: cover;: Diese Eigenschaft stellt sicher, dass der Hintergrund Das Bild deckt die gesamte Breite des Elements ab.
• background-position: center center;: Positioniert das Hintergrundbild horizontal und vertikal in der Mitte.
• background-repeat: no-repeat;: Verhindert verhindert, dass sich das Bild innerhalb des Elements wiederholt.

Browserkompatibilität:

Diese Lösung wird unterstützt in:

• Safari 3
• Chrome Whatever
• IE 9
• Opera 10
• Firefox 3.6 (Firefox 4 unterstützt Nicht-Hersteller-Präfixversion)

IE-spezifische Lösung:

Für IE-Kompatibilität kann der folgende CSS-Code verwendet werden:

<code class="css">filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;</code>

Credit:

Inspiration und Anerkennung für diese Lösung gehen an Chris Coyiers Artikel unter https://css-tricks.com/perfect-full-page-background-image/.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS ein Hintergrundbild in voller Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!