Wie dehne ich Hintergrundbilder aus, um ganze HTML-Elemente abzudecken?

Erweitern von Hintergrundbildern, um ganze HTML-Elemente abzudecken

In dieser Programmierabfrage treffen wir auf einen Benutzer, der versucht, ein Hintergrundbild über das Ganze auszudehnen eines Zelle. Der bereitgestellte HTML-Code verwendet ein Hintergrundbild mit einer festgelegten Breite innerhalb eines übergeordneten Div. Das derzeit verwendete CSS richtet das Bild links in der Mitte aus.

Um den gewünschten Effekt zu erzielen, müssen wir bestimmte CSS-Eigenschaften verwenden, die es Hintergrundbildern ermöglichen, die gesamte Ausdehnung ihrer übergeordneten Elemente abzudecken. Der folgende Code stellt eine Lösung dar:

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

Dieser Code enthält die Eigenschaft „background-size“, die in Verbindung mit dem Wert „cover“ ermöglicht, dass sich das Hintergrundbild an die Größe des Elements anpasst, ohne dessen Seitenverhältnis zu verzerren . Darüber hinaus stellt die feste Eigenschaft sicher, dass das Bild beim Scrollen stationär bleibt.

Diese Lösung ist mit verschiedenen Browsern kompatibel, einschließlich Safari 3, Chrome, IE 9, Opera 10 und Firefox 3.6.

Für Für Browser, die die Eigenschaft „Hintergrundgröße“ nicht unterstützen, gibt es eine alternative IE-spezifische Lösung:

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

Der Dank für diese Lösung geht an den ausführlichen Artikel von Chris Coyier: http://css-tricks.com/perfect -full-page-background-image/.

Das obige ist der detaillierte Inhalt vonWie dehne ich Hintergrundbilder aus, um ganze HTML-Elemente abzudecken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!