CSS Mask-image 不起作用

Question

我正在尝试使用 CSS 属性 -webkit-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>

您的代码做了两件新奇的事情——动画和文本阴影。对于文本阴影，我确保您的 span 和 h1 都具有 font-weight:bold （默认情况下，一个是粗体，另一个不是）。对于动画，我留给你自定义。您需要更改缓动和背景位置。