Làm thế nào để - Thay đổi nền trên 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 trên cuộn
Cuộn xuống bên trong khung để xem hiệu ứng:
Cách thay đổi hình nền trên cuộn
Bước 1) Thêm HTML:
Thí 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:
Thí 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;
}