在网页开发中,我们常常需要在图片上添加一些文字说明,通过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标签设置宽高,以避免这种文字不显示的情况。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。