如何将纹理应用于带有阴影的文本答案

【问题标题】：How to apply texture to text with a shadow如何将纹理应用于带有阴影的文本
【发布时间】：2015-10-17 23:16:29
【问题描述】：

我正在尝试通过添加图像纹理和阴影来设置一些文本的样式，使其看起来像剪纸。

我已使用 CSS 将图像纹理应用于文本；但是，当我尝试添加 text-shadow 时，阴影会出现在文本的前面而不是后面。

@import url(https://fonts.googleapis.com/css?family=Slackey);
.paperText { 
    font-family: 'Slackey', cursive;
    background:url('http://i.imgur.com/sEWJZF2.jpg'); 
    font-size:60px;
    text-align:center;
    color:transparent;
    -webkit-background-clip:text;
    text-shadow: 5px 5px 10px #000;
}

<h1 class="paperText"><HEAD>Texture</HEAD></h1>

如何让阴影出现在文字后面？

【问题讨论】：

标签： css text textures shadow

【解决方案1】：

我认为不可能在一个元素上做到这一点。您可以做的是创建另一个元素来处理文本阴影，然后将其放在原始元素的后面。

.paperText:after {
  position:absolute;
  top:0;
  left:0;
  color:#fff;
  content:'Texture';
  z-index:-1;
  text-shadow: 5px 5px 10px #000; 
  text-align:left; 
}

https://jsfiddle.net/3tkm7gj7/1/

【讨论】：