چگونه در حال حرکت کردن پس‌زمینه را تغییر دهیم

آموزش نحوه تغییر تصویر پس‌زمینه در حال حرکت با استفاده از CSS.

چگونه در حال حرکت کردن تصویر پس‌زمینه را تغییر دهیم

قدم اول - اضافه کردن 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;
}

آموزش‌های عملی