CSS 文字陰影覆蓋背景線性漸變

Question

我正在開發一個 web 應用程序，該應用程序將允許用戶生成徽標，並在某些情況下發現了問題。 當文本顏色實際上是漸變時，我使用一種技術來渲染這種漸變，其中顏色設置為透明，背景設置為漸變，因為顏色不能直接接受漸變值。

但是，當我也使用 text-shadow 屬性，比如創建 3D 陰影效果時，陰影 colors 塊/覆蓋背景顏色。 下面的 CSS 取自發生這種情況的示例。 文本陰影有不同的灰色陰影，背景本身具有從藍色到橙色的線性漸變，但最終結果似乎沒有那些 colors。 是否有 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的output如下圖所示：

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>