Dưới đây là mã nguồn để tạo hình ảnh có khối chữ với nền trong suốt (semi-transparent) bằng CSS:
Ví dụ
<!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>
Kết quả
Mã trên sẽ cho ra kết quả như sau:
