在网页设计中,图片经常被用作布局的一部分,但是如果需要在图片上添加文字,该怎么办呢?这篇文章将向您展示如何使用CSS在图片上添加文字。添加文字到图片需要指定一个容器,将图片放在该容器中,并使用CSS添
<!DOCTYPE html> <html> <head> <title>在图片上添加文本</title> <style> .text-on-image { display: flex; align-items: center; justify-content: center; position: relative; } .text-on-image img { display: block; max-width: 100%; height: auto; } .text-on-image .text { position: absolute; text-align: center; font-size: 2rem; font-weight: bold; color: white; text-shadow: 2px 2px 4px #000000; } </style> </head> <body> <div class="text-on-image"> <img src="https://via.placeholder.com/500x300" alt="placeholder image"> <div class="text">在图片上添加文本</div> </div> </body> </html>
粉丝
0
关注
0
收藏
0