研究和测试后,我这样写实现对称的渐变样式 样式名:indicator-class="indicator" 样式内容: .indicator { position: relative; } .indicator::after { position: absolute; content: ''; width: 100%; height: 1px; border-color: rgba(255, 255, 255, 0.3); background: none; } .indicator::before { position: absolute; content: ''; width: 100%; height: 1px; border-color: rgba(255, 255, 255, 0.3); background: none; } ------ 样式名:mask-class="mask" 样式内容: .mask { background: none; } .mask::after { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(50, 46, 131, 0.98) 0%, rgba(50, 46, 131, 0.1) 49%, rgba(50, 46, 131, 0) 50%, rgba(50, 46, 131, 0.1) 51%, rgba(50, 46, 131, 0.98) 100%) no-repeat; }
关于picker-view 的mask的背景渐变样式设置如题,自己在使用picker-view组件时,想把picker-view的背景色改成另一个颜色,以符合视觉稿。通过一番摸索后发现,picker-view背景显示白色的原因是因为其上方的遮罩层设置了带透明度的白色,故自己想从设置mask的背景色来解决这个问题。但是当设置了mask的渐变背景后,发现渐变只覆盖了mask的上半部分。 [图片] - 请问如何设置能使渐变色覆盖mask的全部呢?。通过自己的观察发现,picker-view组件 中mask的默认背景渐变样式是从顶端开始到选中框上方,不透明度逐渐降低,而后选中框上方完全透明,再从选中框下方开始直到末尾不透明度逐渐增加,呈现一种以选中框为轴两端对称的渐变效果,请问是否有便捷方法能设置mask的样式以模仿这种效果,只是背景色稍加变换? [图片]
2020-05-07