چگونه میتوان در حال حرکت کردن پسزمینه را تغییر داد؟
- صفحه قبل تصویر پسزمینه مبهم
- صفحه بعدی تصاویر موازی
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; }
- صفحه قبل تصویر پسزمینه مبهم
- صفحه بعدی تصاویر موازی