CSS Mask-image不起作用

Question

我正在尝试使用CSS属性-webkit-mask-image来屏蔽图像（带文本阴影）。

我知道我可以使用背景剪辑但是我需要仅使用mask-image

来执行此操作 由于某种原因

属性。但是在试用它时，我堆叠了一些CSS代码。

这是我的CSS代码：

#masking h1, span.mask-text {
    font-size: 230px;
    font-family: 'Lilita One', sans-serif;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    -webkit-text-fill-color:transparent;
    position:absolute;
    left: 100px;


}

#masking h1 {
    text-shadow: 3px 3px 0px #34495e;
    z-index:2;
}

span.mask-text {
       -webkit-mask-image: url('http://halloweenmaternitycostumes.com/wp-content/uploads/2014/11/paper.jpg') no-repeat center center;
   background-size: cover;
    z-index:5;
    -webkit-transition:all 0.7s ease;
   -moz-transition:all 0.7s ease;
     -o-transition:all 0.7s ease;
        transition:all 0.7s ease;

}

span.mask-text:hover{
cursor: pointer;
 -webkit-mask-image: ('http://halloweenmaternitycostumes.com/wp-content/uploads/2014/11/paper-hover.jpg') no-repeat center center;
   background-size: cover;
 z-index:5;

}
span.mask-text:after {
    content: 'Mask Text';
    text-transform: uppercase;
}

这是我想要做的图像：

这里是jsFiddle版本：http://jsfiddle.net/cmtr3txu/2/

如果您能使用jsFiddle向我展示解决方案，那就太棒了。

Answer 1

我在这里更新了你的代码： http://jsfiddle.net/cajvgkxt/3/

要为文本添加背景，请执行以下操作...注意：背景必须在裁剪之前进行！

span{
    font-size: 50px;
    font-family: Helvetica, Arial;
  background: url(http://www-users.cs.umn.edu/~interran/texture/lic2.gif);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<span>Text</span>

你的代码做了两件小事 - 动画和文字阴影。对于text-shadow，我确保你的span和h1都有font-weight：bold（默认情况下，一个是粗体而另一个不是）。对于动画，我把它留给你自定义。您需要更改宽松和背景位置。