CSS文本阴影覆盖背景线性梯度

Question

我正在开发一个web应用程序，它将允许用户生成一个徽标，并且在某些场景中发现了一个问题。当文本颜色实际上是渐变时，我使用一种技术来呈现此渐变，其中颜色设置为透明，背景设置为渐变，因为颜色不能直接接受梯度值。

但是，当我也使用文本阴影属性(如创建三维阴影效果)时，阴影颜色会阻塞/重写背景色。下面的CSS是从发生这种情况的示例中获取的。文本阴影有不同的灰色阴影，背景本身具有从蓝色到橙色的线性梯度，但最终的结果似乎没有这些颜色。是否有不同的CSS属性组合，或者提供渐变到颜色属性而不是背景，以防止这个问题？

#logo {
    color: transparent;
    background: linear-gradient(#3294cd, #a85c34);
    background-clip: text;
    -webkit-background-clip: text;
    font-style: italic;
    font-weight: bold;
    font-family: Aladin;
    filter:  brightness(100%) contrast(140%) saturate(140%);
    text-shadow: 0px 0px 0 #bbb, -1.4285714285714284px 0.5714285714285714px 0 #999, -2.8571428571428568px 1.1428571428571428px 0 #888, -4.285714285714286px 1.7142857142857142px 0 #777, -5.7142857142857135px 2.2857142857142856px 0 #666, -7.142857142857143px 2.857142857142857px 0 #555, -8.571428571428571px 3.4285714285714284px 0 #444, -10px 4px 0 #333;
}

上述CSS的输出如下：

​

​

Answer 1

文本阴影的工作方式似乎是创建一个文本的“副本”的相关颜色和相关的距离/位置与实际文本。所以，如果你的文本基本上是透明的，你只会看到阴影。

这个“技巧”可以让你从文本中得到一个背景，但这并不能阻止背景仍然是一个背景，也就是说，它是“在”其他一切之下，包括阴影。

我唯一能想到的解决办法是有两份文本。将第一个元素放入第二个元素后面的绝对位置元素中。第一个将有阴影，第二个将有‘断线’的背景。

​

#dummyLogo {
  position: absolute;
  color: transparent;
  font-style: italic;
  font-weight: bold;
  font-family: Aladin;
  filter: brightness(100%) contrast(140%) saturate(140%);
  text-shadow: 0px 0px 0 #bbb, -1.4285714285714284px 0.5714285714285714px 0 #999, -2.8571428571428568px 1.1428571428571428px 0 #888, -4.285714285714286px 1.7142857142857142px 0 #777, -5.7142857142857135px 2.2857142857142856px 0 #666, -7.142857142857143px 2.857142857142857px 0 #555, -8.571428571428571px 3.4285714285714284px 0 #444, -10px 4px 0 #333;
  font-size: 72px;
  z-index: -1;
}

#logo {
  color: transparent;
  background: linear-gradient(#3294cd, #a85c34);
  background-clip: text;
  -webkit-background-clip: text;
  font-style: italic;
  font-weight: bold;
  font-family: Aladin;
  filter: brightness(100%) contrast(140%) saturate(140%);
  font-size: 72px;
}

<div id="dummyLogo">HELLO</div>
<div id="logo">HELLO</div>

​