Wie dehne ich ein Hintergrundbild, um ein Element in CSS zu füllen?

Hintergrundbilder in CSS strecken

Sie möchten, dass Ihr Hintergrundbild den gesamten Raum eines Elements wie einer einnimmt, aber das gelingt scheinbar nicht es richtig zu dehnen? Hier ist eine einfache CSS-Lösung.

Das bereitgestellte CSS-Skript definiert eine Klasse namens „style1“ mit den folgenden Eigenschaften:

.style1 {
  background-image: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: left center;
}

Während dies das Hintergrundbild auf dem Element anzeigt, hat es gewonnen Dehnen Sie es nicht, um die gesamte Zelle auszufüllen. Um dies zu erreichen, müssen wir die Hintergrundeigenschaft ändern:

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

Die Eigenschaft „background-size: cover“ stellt sicher, dass die Größe des Hintergrundbilds so geändert wird, dass es das gesamte Element abdeckt, ohne sein Seitenverhältnis zu verzerren. Damit das Bild an Ort und Stelle bleibt, verwenden wir „background-position: center center“ und „background-attachment: Fixed“.

Diese Lösung funktioniert in einer Vielzahl von Browsern, einschließlich Safari, Chrome, IE 9, Opera 10, und Firefox 3.6.

Für Internet Explorer kann eine alternative Lösung verwendet werden:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;

Diese verwendet einen proprietären Filter, um das Hintergrundbild zu strecken, wird aber nur im IE unterstützt.

Credits: Chris Coyiers Artikel „Perfect Full Page Background Image“ unter http://css-tricks.com/perfect-full-page-background-image/

Das obige ist der detaillierte Inhalt vonWie dehne ich ein Hintergrundbild, um ein Element in CSS zu füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!