কম্পিউটার

কিভাবে CSS ব্যবহার করে একটি স্বচ্ছ ব্যাকগ্রাউন্ড টেক্সট সহ একটি ইমেজ তৈরি করবেন?


CSS −

ব্যবহার করে স্বচ্ছ ব্যাকগ্রাউন্ড টেক্সট সহ একটি ইমেজ তৈরি করার কোড নিচে দেওয়া হল

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" imageContent="width=device-width, initial-scale=1">
<style>
* {
   box-sizing: border-box;
}
body {
   font-family: Arial;
   font-size: 17px;
}
.imageContainer {
   display: inline-block;
   position: relative;
}
.imageContainer .imageContent {
   position: absolute;
   bottom: 0;
   background: rgba(29, 6, 43, 0.5); /* Black background with 0.5 opacity */
   color: #f1f1f1;
   width: 100%;
   padding: 20px;
}
</style>
</head>
<body>
<h2>Image with Transparent Text</h2>
<div class="imageContainer">
<img src="https://i.picsum.photos/id/59/500/500.jpg">
<div class="imageContent">
<h1>Sceneray</h1>
<h3>A beautiful scenary showing fence, barbed wires and grass</h3>
</div>
</div>
</body>
</html>

আউটপুট

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

তৈরি করবে

কিভাবে CSS ব্যবহার করে একটি স্বচ্ছ ব্যাকগ্রাউন্ড টেক্সট সহ একটি ইমেজ তৈরি করবেন?


  1. কিভাবে CSS দিয়ে একটি ফুল স্ক্রীন ভিডিও ব্যাকগ্রাউন্ড তৈরি করবেন?

  2. কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল কাটআউট/নকআউট পাঠ্য তৈরি করবেন?

  3. কিভাবে CSS দিয়ে একটি উজ্জ্বল লেখা তৈরি করবেন?

  4. সিএসএস ব্যবহার করে একটি ধারণকৃত পাঠ্য সহ একটি মন্তব্য বাক্স কীভাবে তৈরি করবেন