Wie kann ich Hintergrundbilder mithilfe von CSS responsiv gestalten?

Responsive Hintergrundbilder mit CSS erreichen

Im Webdesign ist es oft wünschenswert, Hintergrundbilder zu haben, die sich dynamisch an verschiedene Bildschirmgrößen anpassen. Um dies zu erreichen, möchten Sie, dass die Breite des Bildes an den verfügbaren Platz angepasst wird, während gleichzeitig das Seitenverhältnis beibehalten und die Höhe proportional skaliert wird.

Verwenden von background-size: cover;

Um dies zu erreichen, bietet CSS3 die Eigenschaft background-size. Insbesondere stellt die Einstellung Abdeckung sicher, dass das Hintergrundbild so skaliert wird, dass es den gesamten verfügbaren Raum ausfüllt und seine Proportionen beibehält. Das Bild wird bei Bedarf vertikal zugeschnitten, damit es passt, sodass vertikales Scrollen ohne horizontale Wiederholungen möglich ist.

Hier ist ein Beispielcode, der dies demonstriert:

body {
    background-image: url(images/background.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Wie sich Contain und Cover unterscheiden

Enthalten: Skaliert das Bild so, dass es vollständig in den Hintergrundpositionierungsbereich passt und gleichzeitig sein Seitenverhältnis beibehält. Dies kann zu leeren Bereichen rund um das Bild führen.

Abdeckung: Skaliert das Bild so, dass es den gesamten Hintergrundpositionierungsbereich abdeckt und dabei das Seitenverhältnis beibehält. Dies kann dazu führen, dass das Bild passend zugeschnitten wird.

Verstehen der visuellen Wirkung

Stellen Sie sich ein Bild mit einer Auflösung von 4x3 vor, das als Hintergrund für einen 16x9-Bildschirm verwendet wird.

Enthalten: Das Bild passt in den Bildschirm, lässt aber auf beiden Seiten leeren Platz Seite.

Cover: Das Bild deckt den gesamten Bildschirm ab, schneidet jedoch oben und unten einen Teil ab.

Um diesen Unterschied zu veranschaulichen, hier eine Demonstration:

<div class="contain">
    <!-- Background image will fit, leaving empty space -->
</div>
<div class="cover">
    <!-- Background image will cover, cropping as needed -->
</div>

.contain, .cover {
    width: 20em;
    height: 10em;
    background-image: url(example.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #ccc;
    border: 1px solid;
}

.contain {
    background-size: contain;
}

.cover {
    background-size: cover;
}

Das obige ist der detaillierte Inhalt vonWie kann ich Hintergrundbilder mithilfe von CSS responsiv gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!