css 图片上添加文字不显示

在网页开发中，我们常常需要在图片上添加一些文字说明，通过CSS去实现。但是有时候，我们会遇到添加文字但是却不显示的情况，这是为什么呢？

<code>/*CSS代码*/
img {
    position: relative;
}

img::after {
    content: attr(alt);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
}</code>

上面的代码是一个常见的方式，在图片上添加文字。但是有时候发现文字并没有显示出来，这个时候检查一下自己的图片是否设置了alt属性。如果没有设置，就会出现文字不显示的问题，因为在CSS中使用的是content属性去调用alt属性的值，如果alt属性没有值，就相当于调用一个空白值。

如果alt属性已经设置了，还是没有显示出文字，可以检查一下img标签是否设置了宽高。因为在CSS中，设置position属性，需要先设置父容器的position属性，而img标签没有设置宽高，就相当于没有设置父容器的position属性，因此文字也不会显示出来。

在实际开发中，我们应该注意给图片设置alt属性，同时也需要给img标签设置宽高，以避免这种文字不显示的情况。