C
运行 »
×
下载代码
⇫
加载文件
改变主题,夜晚/白天
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ text-align:center; } * {box-sizing: border-box;} .container { position: relative; width: 50%; max-width: 300px; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.2); width: 100%; opacity:0; transition: .9s ease; font-size: 25px; padding: 20px; } .container:hover .overlay { opacity: 1.5; } </style> </head> <body> <h1>图片叠加标题效果</h1> <h2>将鼠标移到图像上以查看效果。</h2> <center> <div class="container"> <img src="/public/static/images/try/img_london.jpg" class="image"> <div class="overlay">Welcome to RocSchool.com</div> </div> </center> </body> </html>