css在图片上设置文字

在网页设计中，有时需要在图片上方或下方添加一些文字，以增加图片的描述性和表现力。这时候，我们可以利用CSS来实现在图片上设置文字的效果。

首先，我们需要在HTML中插入一个图片标签：

img src="picture.jpg" alt="图片描述">

然后，我们可以通过CSS的position和z-index属性，使文字覆盖在图片上方或下方。

以覆盖在图片下方为例，代码如下：

p {
    position: relative;
    z-index: 1;
}
img {
    position: relative;
    z-index: 0;
}
    

其中，position: relative; 表示使用相对定位，z-index: 1; 表示层级为1，即在文字和图片之上；z-index: 0; 表示层级为0，即在文字之下。

接下来，我们需要在HTML中插入一个段落标签，以显示要添加的文字：

p>
    这是在图片下方添加的文字/p>
    

最终，我们的代码应该如下所示：

p>
    这是在图片下方添加的文字/p>
    img src="picture.jpg" alt="图片描述">
CSS样式：p {
    position: relative;
    z-index: 1;
}
img {
    position: relative;
    z-index: 0;
}
    

通过这种方式，在图片上设置文字不仅使图片更具表现力，而且还能提高网页的用户体验，让用户更好地理解图片内容。

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