/* 使用position属性和:before伪元素来添加文字 */ img { position: relative; display: block; margin-bottom: 20px; } img:before { content: "这是一张图片"; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 20px; text-align: center; padding: 10px; } /* 使用clip-path属性和background-clip属性来添加文字 */ img { display: inline-block; margin-right: 20px; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); background-clip: padding-box; position: relative; } img:before { content: "这是一张不错的图片"; position: absolute; left: 0; bottom: 0; width: 100%; background-color: rgba(0, 0, 0, 0.8); color: #fff; font-size: 18px; text-align: center; padding: 10px; }
以上是两种常用的方法,第一种方法使用了position属性和:before伪元素,通过设置绝对定位和背景颜色来实现在图片上方添加文字;第二种方法则是使用了clip-path属性和background-clip属性,通过设置裁剪路径和背景区域来实现同样的效果。
上面的代码中,大家可以根据需要调整文字的颜色、字体大小、位置等样式。通过这种简单的方法,可以让网页看起来更加美观和有趣。