前言:
当前小伙伴们对“颜色透明度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