龙空技术网

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

Web技术前沿 249

前言:

当前小伙伴们对“颜色透明度css”大约比较关切,同学们都想要了解一些“颜色透明度css”的相关知识。那么小编也在网摘上汇集了一些有关“颜色透明度css””的相关知识,希望姐妹们能喜欢,咱们一起来了解一下吧!

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

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

对应的显示效果如下:

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

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

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

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

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

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

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

附上完整的CSS:

感谢阅读!

标签: #颜色透明度css