css - 为 SASS 文本阴影添加不透明度

Question

这是我的 jsfiddle:https://jsfiddle.net/f5pt0pys/

我正在尝试为文本阴影添加不透明度。我试过了

//color vars
$color-bg: rgba(74,56,158, 0.5);
$color-title: #ffffff;
$color-line-1: rgba(92,196,191, 0.5); 

但是好像不行。有任何想法吗？

Answer 1

实际上您的代码可以正常工作并为元素生成尽可能多的阴影。但是由于您使用的是多个半透明阴影 - 它们正在形成非透明阴影，因为它们的整体不透明度远远超过 1.0

Jsfiddle 似乎显示不正确，所以我已将您的代码复制到 codepen.io .

如果您放大页面使阴影开始覆盖超过 1 像素，那么在这种情况下可以看到阴影是半透明的事实:

或者，出于测试目的，您可以在阴影之间使用更大的步长:$length: $length - 10;。在这种情况下，很明显您的阴影实际上是半透明的:

当然我还要告诉你，绘制大量复杂和半透明的阴影会消耗浏览器大量资源，所以你需要小心使用这种效果，因为它会导致性能下降，尤其是在移动设备上。