نتیجه
امتحان کنید
<!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; } .container { position: relative; max-width: 800px; margin: 0 auto; } .container img {vertical-align: middle;} .container .content { position: absolute; bottom: 0; background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */ color: #f1f1f1; width: 100%; padding: 20px; } </style> </head> <body> <h2>Responsive Image with Transparent Text</h2> <div class="container"> <img src="http://articles.tahlildadeh.com/image.axd?picture=1_15.jpg" alt="دوره طراحی سایت" alt="دوره طراحی سایت" style="width:100%;"> <div class="content"> <h1>عنوان</h1> <p>دوره طراحی سایت</p> </div> </div> </body> </html>
امتحان کنید