কম্পিউটার

সিএসএস দিয়ে স্ক্রলে ব্যাকগ্রাউন্ড ইমেজ কিভাবে পরিবর্তন করবেন?


সিএসএস ব্যবহার করে স্ক্রোল করার সময় পটভূমির ছবি পরিবর্তন করার কোডটি অনুসরণ করা হয়েছে -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1>
<style>
body, html {
   height: 100%;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
}
* {
   box-sizing: border-box;
}
div {
   height: 40%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
.image1 { background-image: url("https://i.picsum.photos/id/827/400/400.jpg"); }
.image2 { background-image: url("https://i.picsum.photos/id/817/400/400.jpg"); }
.image3 { background-image: url("https://i.picsum.photos/id/811/400/400.jpg"); }
.image4 { background-image: url("https://i.picsum.photos/id/871/400/400.jpg"); }
.image5 { background-image: url("https://i.picsum.photos/id/471/400/400.jpg"); }
.image6 { background-image: url("https://i.picsum.photos/id/271/400/400.jpg"); }
h1{
   position:fixed;
   top:10%;
   left: 40%;
   background-color: rgba(0, 0, 0, 0.527);
   padding: 40px;
   color: white;
}
</style>
</head>
<body>
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
<h1>Fixed Text</h1>
</body>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

সিএসএস দিয়ে স্ক্রলে ব্যাকগ্রাউন্ড ইমেজ কিভাবে পরিবর্তন করবেন?


  1. সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে স্ক্রলে একটি শিরোনাম কীভাবে সঙ্কুচিত করবেন?

  2. সিএসএস দিয়ে প্লেসহোল্ডার অ্যাট্রিবিউটের রঙ কীভাবে পরিবর্তন করবেন?

  3. সিএসএস দিয়ে তালিকার জন্য বুলেটের রং কীভাবে পরিবর্তন করবেন?

  4. কিভাবে CSS দিয়ে একটি অন স্ক্রোল ফিক্সড নেভিগেশন বার তৈরি করবেন?