如果在图片上显示文字，经常会遇到这个情况，就是当文字和背景颜色差不多时，文字会看不清楚，我们一般通过给文字加text shadow或者修改图片的透明度来让文字显示更加突出。我们今天说一下透明度的问题，一般我们干这个活儿是通过photoshop来做，其实CSS本身也可以实现类似的效果。如何做？
咱们先从下面这个例子开始，有一张背景图片，上面有些文字：
对应的显示效果如下：
可以看到，文字显示不是特别清晰，现在要给图片增加一层控制透明度，我们使用伪元素实现：
可以看到，加入了一层，inset是top, bottom, left, right的简写形式，将它们都设为0。通过这个设置，显示效果如下：
现在它把所有元素都盖住了，而我们需要文字在这层的上面，如果加入z-index:-1, 则这个层又跑到所有元素下面，看不到了。
要解决这个问题，我们需要引入一个关键CSS，isolation: isolate; 通过它来创建一个新的CSS堆叠上下文，从而使得这个层不会跑到外面，具体关于isolation, 我专门写过一个文章，这里可以直接查看详细信息：使用isolation: isolate来创建堆叠上下文
可以看到，这个层现在位于文字和图片中间，如下所示：
那现在就简单了，可以更改opacity来控制其透明度，
最后将颜色改为黑色，就达到了我们所期望的效果。
附上完整的CSS：
感谢阅读！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人，不代表IT壹频道。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。转载请注明出处：https://www.1pindao.com/baike/14971.html
