css中怎么让图片左下角带有字

在CSS中，我们可以使用以下方法，让图片的左下角带有文字：

 <div class="image-container">
        <img src="image.jpg" alt="example image">
        <div class="image-caption">这是图片的描述文字</div>
    </div>
    
    .image-container {
        position: relative; /* 让容器成为定位参照 */
    }
    
    .image-caption {
        position: absolute; /* 让文字绝对定位于容器中 */
        bottom: 0; /* 让文字显示在容器的下方 */
        left: 0; /* 让文字显示在容器的左侧边缘 */
        background-color: rgba(0, 0, 0, 0.7); /* 设置文字的背景色 */
        color: #fff; /* 设置文字的颜色 */
        padding: 10px; /* 给文字添加一些内边距 */
    } 

代码解释：

• 首先，请使用一个带有class属性的div作为图片的容器。
• 在容器中添加一个img标签，用于显示图片。
• 再添加一个带有class属性的div，用于作为文字的容器。
• 将容器设置为相对定位，让文字容器的绝对定位参照该容器。
• 将文字容器设置为绝对定位，让它相对于图片容器进行定位。
• 设置文字容器的bottom属性为0，让它距离底部为零。
• 设置文字容器的left属性为0，让它距离左侧边缘为零。
• 为文字容器设置合适的背景色和颜色，并添加一些内边距。

使用以上的CSS代码，你就可以轻松地让图片的左下角带有文字了。