Cách thực hiện - Thay đổi hình nền khi cuộn
Tìm hiểu cách thay đổi hình nền khi cuộn bằng CSS.
Thay đổi hình nền khi cuộn
Kéo xuống bên trong khung để xem hiệu ứng:
Cách thay đổi hình nền khi cuộn
Bước 1) Thêm HTML:
Ví dụ
<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>
Bước 2) Thêm CSS:
Ví dụ
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;
}
Hãy tự mình thử »