css怎么在图片添加文字不显示

在前端开发中，经常需要在图片上添加一些文字说明，它能够帮助用户更好地理解图片的含义。但是，当你在HTML页面中插入图片并添加文字时，可能会遇到文字在图片上不显示的问题。这是由于CSS的一些样式特性造成的。

我们可以使用CSS的 text-indent 属性来达到这个效果。该属性可以设置文字距离左侧边距的距离，通过让文字超出父元素的范围而使其不可见，而图片本身不受影响。下面是一个示例：

    <div class="container">
        <img src="example.jpg" alt="example">
        <p class="caption">这是一张范例图片</p>
    </div>

.container {
    position: relative;
}

.caption {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

首先，我们将图片包含在一个父元素 .container 中，这样我们就可以对图片使用绝对定位。同时，我们将 .caption 类的 left 和 top 属性设置为一个非常大的负值，这样文字就会从当前视窗中消失。

最后，我们要注意一点是，当文字被 text-indent 隐藏时，被隐藏的文字依然可以通过鼠标选择和复制。如果你不希望用户选择这些文字，可以像下面这样添加一些额外样式：

.caption {
    position: absolute;
    left: -9999px;
    top: -9999px;
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

通过设置 pointer-events: none; ，我们可以让文字元素在鼠标事件中不响应。如果你使用的是较老的浏览器，你可以通过 user-select 属性禁止用户选择和复制文字。

总之，使用 text-indent 和一些 CSS 技巧，你可以非常方便地在图片上添加文字，同时保持美观和易读。