在网页设计中,我们常常需要在图片上添加文字说明。这时,我们可以利用CSS的一些属性来实现在图片上写字。首先,我们需要将图片置于一个容器中,在容器中添加图片,并使用position属性将图片定位。然后,
<style type="text/css"> .container { position: relative; width: 500px; height: 400px; } img { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; } .text { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 24px; font-weight: bold; text-align: center; } </style> <div class="container"> <img src="example.jpg" alt="" /> <p class="text">这是一段图片上的文字说明</p> </div>
粉丝
0
关注
0
收藏
0