css3图片上方添加文字

CSS3是CSS的第三个版本，它增加了很多新的功能，使得我们可以更好地控制和美化网页。其中之一就是在图片上方添加文字的功能。

/* 使用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属性，通过设置裁剪路径和背景区域来实现同样的效果。

上面的代码中，我们可以根据需要调整文字的颜色、字体大小、位置等样式。通过这种简单的方法，可以让网页看起来更加美观和有趣。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！