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

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

به طور شخصي امتحان كنيد