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

我试图通过添加图像纹理和投影来设计一些文本的样式，使其看起来像剪纸一样。如何将纹理应用于带有阴影的文本

我已经使用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>

我怎样才能阴影出现后面的文字？

来源

2015-10-17 Miles Rose

我不认为这是可能做到这一点的一个元素。你可以做的是创建另一个元素来处理文本阴影，然后在原始文件后面进行分层。

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

来源

2015-10-17 23:48:56 partypete25

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

回答

相关问题