css 图片上怎么加文字

在网页设计中，经常会遇到在图片上加上文字的需求，这样可以更好地表达图片想要传达的信息或者增加图片的美感。在CSS中，可以使用文字层覆盖的方式实现这一功能。 在HTML中，我们可以使用img标签插入图片。如果要在图片上加上文字，则需要嵌套一个div标签。在该div内，使用文本标签p来书写要在图片上展示的文字，如下所示：

    <div class="image-with-text">
        <img src="example.jpg">
        <p>这是一段文字</p>
    </div>

接下来，我们需要用CSS设置文本的样式和位置。首先，需要对嵌套在div中的img和p元素进行定位。我们可以使用相对定位的方式来调整文本位置，如下所示：

    .image-with-text {
        position: relative;
    }

    .image-with-text img {
        display: block; /* 将img设置为块级元素 */
    }

    .image-with-text p {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0.5); /* 为文本添加背景色，提高可读性 */
        color: #fff; /* 设置文本颜色为白色 */
        padding: 10px; /* 为文本添加内边距 */
        margin: 0; /* 移除默认的外边距 */
    }

在上面的代码中，我们使用了绝对定位来控制文本的位置，bottom、left、right属性分别控制文本距离底部、左边和右边的距离。此外，我们还设置了文本的背景色、颜色、内边距和外边距等样式。 通过以上步骤，我们就可以实现在图片上加上文字的效果了。不过需要注意的是，文本的长度和位置需要根据实际情况进行调整，不然会影响美观和可读性。同时，也可以根据个人喜好和需求，调整文本的样式，以达到更好的效果。