css图片遮住了文字

CSS 是前端开发中必须掌握的一项技能。在实际开发中，我们通常会使用 CSS 对各种网页元素进行样式设计，包括文字、图片等等。不过，在样式设计过程中，有时候会遇到一个问题，那就是图片遮住了文字。

.img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

在上面的代码中，我们使用了 position 属性将图片创建为绝对定位，在样式中设置了 top 和 left 为 0，这样就能够将图片放在最上层并覆盖住文字了，下面我们来说一下如何解决这个问题。

解决方式就是加上一个容器，将文字和图片分别放在两个元素里面，然后将容器的 z-index 设置为 -1，这样就能够遮住图片，显示文字了。

.container{
    position: relative;
    z-index: -1;
}
.text{
    position: relative;
    z-index: 1;
}
    

在上面的代码中，我们使用了 position 属性将容器设置为相对定位，容器中分别放置了文字和图片，然后将容器的 z-index 设置为 -1，将文字的 z-index 设置为 1，这样就能够解决遮住文字的问题了。

总之，对于遮住文字的问题，我们只需要加上一个容器，将文字和图片分别放置在两个元素中，通过 z-index 属性来调整层级关系即可。希望本文对大家有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！