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

时间：2015-10-17 23:16:30

标签： css text textures shadow

我试图通过添加图像纹理和投影来将一些文本设置为看起来像剪纸。

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

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

1 个答案:

答案 0 :(得分：0)

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

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

相关问题
最新问题