我不想使用背景图像、文本笔画和文本阴影来设计文本样式。 我的问题是文本阴影位于背景图像之上。有人知道如何将阴影放在图像后面吗？
如果您运行该代码片段。您会看到我的文本阴影位于图像的顶部。尝试删除文本阴影提示并查看差异。
感谢您的宝贵时间。
.letsgo {
font-family: Catamaran, sans-serif;
font-size: 10em;
background-image: url(https://files.cargocollective.com/c2106023/Unavngivet.png);
background-size: contain;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-stroke: 1px #fff;
text-decoration: none;
text-shadow: 2px 2px 6px #CE5937, 8px 10px 6px #3D79CE, 8px 3px 2px #D782A5;
}<!DOCTYPE html>
<html>
<head>
<a class="letsgo">here is my text</a>
</html>尝试使用CSS伪元素，如
::before::after::after看这个例子：
.letsgo {
font-family: Catamaran, sans-serif;
font-size: 10em;
position: relative;
text-decoration: none;
background-image: url(https://files.cargocollective.com/c2106023/Unavngivet.png);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.letsgo::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
z-index: -1;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-stroke: 1px #fff;
text-shadow: 2px 2px 6px #CE5937, 8px 10px 6px #3D79CE, 8px 3px 2px #D782A5;
}<a class="letsgo" data-text="here is my text">here is my text</a>