Πώς να αλλάζετε το φόντο κατά τη διάρκεια της κύλισης

Μάθετε πώς να αλλάζετε το φόντο εικόνας κατά τη διάρκεια της κύλισης χρησιμοποιώντας το CSS.

Πώς να αλλάζετε το φόντο εικόνας κατά τη διάρκεια της κύλισης

Βήμα 1 - Προσθήκη HTML:

<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>

第二步 - 添加 CSS：

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
* {
  box-sizing: border-box;
}
.bg-image {
  /* 全高 */
  height: 50%;
  /* 将图像居中并适当地缩放 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* 所用的图像 */
.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"); }
/* 将文本放置在页面/图像的中间 */
.bg-text {
  background-color: rgb(0,0,0); /* 回退颜色 */
  background-color: rgba(0,0,0, 0.4); /* 黑色半透明 */
  color: white;
  font-weight: bold;
  font-size: 80px;
  border: 10px solid #f1f1f1;
  position: fixed; /* 保持固定 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  padding: 20px;
  text-align: center;
}

Δοκιμάστε το προσωπικά