Wie kann man die Größe von Hintergrundbildern mit CSS3 ändern
Die Hintergrundbilder können für die Größenänderung und Skalierung verwendet werden. In CSS2.1 behielten Hintergrundbilder, die auf einen Container gesetzt wurden, ihre festen Abmessungen. Glücklicherweise stellt CSS3 die Eigenschaft background-size dar, mit der Hintergründe gedehnt oder gequetscht werden können. Es ist ideal, wenn Sie Responsive Web Design Techniken verwenden, um ein Template zu erstellen.
Hier werden verschiedene Methoden gezeigt:
Absolute Größenänderung
Wenn wir ein Hintergrundbild definieren, werden standardmäßig die Breite und Höhe des Bildes auf "auto" eingestellt, wodurch die ursprüngliche Bildgröße beibehalten wird. Und wenn es notwendig ist, die Größe zu ändern, können absolute Messungen verwendet werden, um eine neue Größe zu erhalten, z. B. px, em, cm usw.
Längenmessungen können durch die Eigenschaft background-size mit einer Absolutmessung durchgeführt werden.
Ein Beispiel für ein verkleinertes Hintergrundbild:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Geänderte Größe des Hintergrundbildes</title>
<style>
.resized {
width: 400px;
height: 300px;
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 300px 200px;
background-repeat: no-repeat;
border: 1px solid #999;
}
</style>
</head>
<body>
<h2>Verändertes Hintergrundbild</h2>
<div class="resized"></div>
</body>
</html>Relative Größenänderung mithilfe von Prozentsätzen
Es kann für reaktionsschnelle Designs nützlich sein, einen Prozentwert zu verwenden. Wenn ein Prozentwert verwendet wird, basiert die Dimension auf dem enthaltenen Element und nicht auf der Größe des Bildes. Wenn die Eigenschaft background-size auf "100% 100%" eingestellt ist, erstreckt sich das Hintergrundbild über den gesamten Inhaltsbereich.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Geänderte Größe des Hintergrundbildes</title>
<style>
.resized {
width: 100%;
height: 400px;
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;
border: 2px solid #999;
}
</style>
</head>
<body>
<h2>Geänderte Größe des Hintergrundbildes</h2>
<div class="resized"></div>
</body>
</html>Maximale Größenskalierung
Wenn die Eigenschaft background-size auf den Wert "contain" value eingestellt ist, wird das Hintergrundbild skaliert und versucht, den Inhaltsbereich anzupassen. Das Bild behält jedoch sein Seitenverhältnis (das proportionale Verhältnis zwischen Breite und Höhe des Bildes) bei.
Der Wert "contain" gibt an, dass das Hintergrundbild unabhängig von der Größe des Containers skaliert werden soll, so dass jede Seite so groß wie möglich ist, ohne die Länge der entsprechenden Seite des Containers zu überschreiten.
Mit anderen Worten, das Bild wird proportional vergrößert oder verkleinert, aber die Abmessungen des Containers werden die Breite und Höhe nicht überschreiten.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Resized and Responsive Background Image</title>
<style>
.resized {
width: 100%;
height: 400px;
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-repeat: no-repeat;
background-size: contain;
border: 1px solid #999;
}
</style>
</head>
<body>
<h2>Resized and Responsive Background Image</h2>
<p>Ändern Sie die Größe des Browsers, um den Effekt zu sehen:</p>
<div class="resized"></div>
</body>
</html>Den Hintergrund abdecken
Wenn die Eigenschaft background-size auf den Wert "cover" eingestellt ist, wird das Hintergrundbild so skaliert, dass es den gesamten Inhaltsbereich abdeckt. Das Bild wird so skaliert, dass es auf den gesamten Container passt, aber das Bild wird beschnitten, wenn es ein anderes Seitenverhältnis hat.
Der Wert "cover" gibt an, dass die Größe des Hintergrundbildes so klein wie möglich ist und beide Dimensionen größer oder gleich der entsprechenden Größe des Containers sind.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Resized und Responsive Background Image</title>
<style>
.resized {
width: 100%;
height: 400px;
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: cover;
border: 1px solid #999;
}
</style>
</head>
<body>
<h2>Resized und Responsive Background Image</h2>
<p>Ändern Sie die Größe des Browsers, um den Effekt zu sehen:</p>
<div class="resized"></div>
</body>
</html>Unterschiedliche Hintergründe für verschiedene Geräte einstellen
Ein großes Foto auf einem großen Computerbildschirm könnte ideal sein, aber auf einem kleinen Gerät kann es wertlos sein. Warum ein großes Bild laden, wenn man es noch verkleinern muss?
Sie können Mediaabfragen verwenden, um verschiedene Bilder auf verschiedenen Geräten anzuzeigen, um die Belastung zu reduzieren.
Hier wird die Regel @media verwendet. In diesem Beispiel gibt es ein großes und ein kleines Bild, die so eingestellt sind, dass sie auf verschiedenen Geräten angezeigt werden. Sie werden den Effekt sehen, wenn Sie die Größe der Browserbreite ändern und das Hintergrundbild ändert sich bei 400px. Um den Effekt deutlich zu sehen, schalten Sie die Symbolleiste des Geräts um und haben Sie eine mobile Ansicht.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Resized und Responsive Background Image</title>
<style>
/* For width smaller than 400px: */
body {
background-repeat: no-repeat;
background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url("/uploads/media/default/0001/03/6514e37cd15dbe1bca3e3b961baa3a19e2283dc3.jpeg");
}
}
</style>
</head>
<body>
<p style="margin-top:220px;">Ändern Sie die Größe der Browser-Breite und das Hintergrundbild ändert sich bei 400px. Um den Effekt deutlich zu sehen, schalten Sie die Symbolleiste des Geräts um und haben Sie eine mobile Ansicht.</p>
</body>
</html>