Gewusst wie: Ändern Sie den Hintergrund beim Scrollen
Erfahren Sie, wie Sie Hintergrundbilder beim Scrollen mit CSS ändern.
Ändern Sie das Hintergrundbild beim Scrollen
Scrollen Sie innerhalb des Rahmens nach unten, um den Effekt zu sehen:
So ändern Sie das Hintergrundbild beim Scrollen
Schritt 1) HTML hinzufügen:
Beispiel
<div class="bg-image img1"></div>
<div class="bg-image img2"></div>
<div
class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div
class="bg-image img5"></div>
<div class="bg-image img6"></div>
<div
class="bg-text">TEXT</div>
Schritt 2) CSS hinzufügen:
Beispiel
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* Full height */
height: 50%;
/* Center and scale
the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Images used */
.img1 {
background-image: url("img_snow.jpg"); }
.img2 { background-image: url("img_girl.jpg");
}
.img3 { background-image: url("img_lights.jpg"); }
.img4 {
background-image: url("img_nature.jpg"); }
.img5 { background-image: url("img_forest.jpg");
}
.img6 { background-image: url("img_woods.jpg"); }
/* Position text
in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0);
/* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black
w/opacity/see-through */
color: white;
font-weight: bold;
font-size: 80px;
border: 10px solid #f1f1f1;
position:
fixed; /* Stay fixed */
top: 50%;
left: 50%;
transform:
translate(-50%, -50%);
z-index: 2;
width: 300px;
padding: 20px;
text-align: center;
}