উদাহরণ
নিচের কোডটি CSS ব্যবহার করে ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড টেক্সটসহ একটি ইমেজ তৈরি করার উদাহরণ:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="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); 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>
আউটপুট
উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:
