前端 - 如何通过CSS修改图片透明度

zhezhongyun 2025-05-30 19:01 71 浏览

如果在图片上显示文字，经常会遇到这个情况，就是当文字和背景颜色差不多时，文字会看不清楚，我们一般通过给文字加text shadow或者修改图片的透明度来让文字显示更加突出。我们今天说一下透明度的问题，一般我们干这个活儿是通过photoshop来做，其实CSS本身也可以实现类似的效果。如何做？

咱们先从下面这个例子开始，有一张背景图片，上面有些文字：

对应的显示效果如下：

可以看到，文字显示不是特别清晰，现在要给图片增加一层控制透明度，我们使用伪元素实现：

可以看到，加入了一层，inset是top, bottom, left, right的简写形式，将它们都设为0。通过这个设置，显示效果如下：

现在它把所有元素都盖住了，而我们需要文字在这层的上面，如果加入z-index:-1, 则这个层又跑到所有元素下面，看不到了。

要解决这个问题，我们需要引入一个关键CSS，isolation: isolate; 通过它来创建一个新的CSS堆叠上下文，从而使得这个层不会跑到外面，具体关于isolation, 我专门写过一个文章，这里可以直接查看详细信息：使用isolation: isolate来创建堆叠上下文

可以看到，这个层现在位于文字和图片中间，如下所示：

那现在就简单了，可以更改opacity来控制其透明度，

最后将颜色改为黑色，就达到了我们所期望的效果。

附上完整的CSS：

感谢阅读！

相关推荐