文本阴影不透明度

Question

是否可能仅调整文字阴影的不透明度，而不是同时调整文本本身的不透明度？

例如，我有紫色文本和蓝色阴影。 我想让蓝色阴影具有不透明度，而不会在紫色方面失去任何东西。

h1.blue {text-shadow: 3px 3px 0px #3f6ba9;}

- Francesca

Answer 1

可以，但要在rgba模式下指定颜色以添加alpha透明度。

h1.blue {text-shadow: 3px 3px 0px rgba(63,107,169, 0.5)} //half of transparency

- Grzegorz Kaczan

Answer 2

针对那些想要使用十六进制代码而不是RGB的人，以下是补充的答案：

h1.blue {text-shadow: 3px 3px 0px #3f6ba980;}

上述HEX代码中的最后2个字符的不透明度设置为50%。对于其他不透明度值，请参考链接此处中的不透明度HEX图表。或者，如果您使用VScode，则可以使用其内置的颜色选择器来调整不透明度。

- Goh Jia Yi

Answer 3

如果你想让阴影更加不透明，你可以添加多个重复的阴影。例如，这样可以在文本周围形成一个相当坚实的白色光晕...

text-shadow:  0px 0px 2px white,0px 0px 2px white,0px 0px 2px white;

我使用这种阴影样式，以确保即使浮动在其他黑色或深色内容上方，浮动的黑色文本也能清晰可读。

- Adam Gawne-Cain