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

Question

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

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

@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>

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

Answer 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/

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

How to apply texture to text with a shadow

css

text

textures

shadow