为SASS text-shadow添加不透明度

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。

如果您放大页面以使阴影开始覆盖超过1px，则可以看到阴影半透明的事实：

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

当然，我还需要告诉我，绘制大量复杂和半透明的阴影会使浏览器耗费大量资源，因此您需要谨慎使用此类效果，因为它会导致性能下降，尤其是在移动设备上。 / p>

Answer 2

text-shadow: 
1px 1px 0 rgba(0,0,0,0.50), 
2px 2px 0 rgba(0,0,0,0.49), 
3px 3px 0 rgba(0,0,0,0.48), 
4px 4px 0 rgba(0,0,0,0.47), 
5px 5px 0 rgba(0,0,0,0.46), 
6px 6px 0 rgba(0,0,0,0.45), 
7px 7px 0 rgba(0,0,0,0.44), 
8px 8px 0 rgba(0,0,0,0.43) 
[...and so on to about 50]