Question

我有一个标题，当它悬停在上面时，颜色变得略微清晰，并且有一个黑色轮廓（我制作了4个文字阴影）。

但是，当我使用hsla（）定义颜色时，这不起作用。颜色设置为黑色，100％不透明度，文本阴影关闭。

当我使用网页安全色（即白色）定义颜色时，一切正常。

我发布了一个jsfiddle来显示问题并证明我的语法没有任何问题（据我所知）：https://jsfiddle.net/TheInternetIO/Lxj12uje/3/ 和我的CSS（针对问题情况）：

h2:hover{
text-shadow:
 -1px -1px 0 #000,  
  1px -1px 0 #000,
  -1px 1px 0 #000,
   1px 1px 0 #000;
 color: hsla(0, 0%, 0%, .2);
}

为什么会这样？

Answer 1

所以发生的事情是文本阴影不仅仅是一个轮廓，它是再次打印的字符（你可以通过给你的文字阴影疯狂偏移看到这一点）。因此，尽管文本是半透明的，但文本阴影却不是，这就是为什么它看起来是黑色的。我在这里更新了你的小提琴：https://jsfiddle.net/Lxj12uje/5/为文字阴影颜色添加透明度，我想你会得到你正在寻找的效果。作为参考，我所做的改变是：

h2:hover{
    text-shadow:
     -1px -1px 0 hsla(0, 0%, 0%, .2),  
      1px -1px 0 hsla(0, 0%, 0%, .2),
      -1px 1px 0 hsla(0, 0%, 0%, .2),
       1px 1px 0 hsla(0, 0%, 0%, .2);
     color: hsla(0, 0%, 0%, .2);
}

为什么text-shadow属性会改变hsla文本颜色？

1 个答案: