css图片中加文字 |右上角弹出css

CSS 图片中加文字是网页设计中的一个常见技巧，它可以为图片搭配说明文字，增加图片的展示效果。本文将介绍三种实现 CSS 图片中加文字的方法。 第一种方法是使用 position 属性。首先在 HTML 中插入一张图片和对应的说明文字，然后在 CSS 样式表中将图片和文字都设为 absolute 定位，再通过 top 和 left 属性调整它们的位置，最终让文字在图片上呈现。代码如下：

p {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

第二种方法是使用 ::after 伪元素。通过在图片上添加 ::after 伪元素并设置内容和样式，就可以在图片上实现添加文字的效果。代码如下：

p {
position: relative;
}
img {
display: block;
}
img::after {
content: "这是图片的说明文字";
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
}

第三种方法是使用 background 属性。在 HTML 中插入一张图片，并将对应的说明文字放在一个 p 标签中，然后在 CSS 样式表中将该 p 标签设为带有透明度的背景图片，最终让文字显示在图片上。代码如下：

p {
background: url(./image.jpg) no-repeat;
background-size: cover;
padding: 20px;
color: #fff;
opacity: 0.8;
}

总结：以上介绍了三种实现 CSS 图片中加文字的方法，每种方法各有优缺点，具体应用视情况而定。无论采用哪种方法，都可以在图文结合的网页设计中提高展示效果。