উদাহরণ
নিচের কোডটি HTML এবং CSS ব্যবহার করে একটি ইমেজের উপরে টেক্সট প্লেস করার উদাহরণ:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1{ text-align: center; } .imageContainer { margin-left:36%; display: inline-block; position: relative; text-align: center; color: rgb(64, 11, 124); } .caption{ font-size: 25px; font-weight: bolder; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .BL { position: absolute; bottom: 8px; left: 16px; } .TL{ position: absolute; top: 8px; left: 16px; } .TR { position: absolute; top: 8px; right: 16px; } .BR { position: absolute; bottom: 8px; right: 16px; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <h1>Place text on image example</h1> <div class="imageContainer"> <img src="https://i.picsum.photos/id/59/500/500.jpg"> <div class="caption BL">Bottom Left Text</div> <div class="caption TL" >Top Left Text</div> <div class="caption TR">Top Right Text</div> <div class="caption BR">Bottom Right Text</div> <div class="caption center">Centered Text</div> </div> </body> </html>
আউটপুট
উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:
