vue elementUI 弹窗阴影的易错点

1,020 阅读1分钟

设计给的弹窗阴影background: rgba(0,12,27,0.20); 代码里我也这样写的,但是测试发现,阴影比设计的要浅一些。

研究发现

如果采用rgba的写法,下边的elementUI自带的opacity会覆盖上边的透明度,导致遮罩颜色偏浅.

如果采用opacity,则会覆盖elementUI默认生成的透明度

同时注意到rgba和opacity最好不要同时使用,否则会出bug

搜索二者的对比,发现background 的透明只是透明了元素的背景并没有改变元素里面的内容,但是opacity的透明是连元素的内容一起变成了透明

image.png

如上图,设置遮罩的话,明显使用opacity更合理

仔细观察,发现element的遮罩层 (z-index=2010 ) 是在弹窗(z-index=2011)的下一级。因此如果不考虑默认样式覆盖的问题,使用rgba和opacity均可。