CSS Mask-image无效

Question

我试图使用CSS属性-webkit-mask-image来屏蔽图像(带有文本阴影).

我知道我可以使用background-clip但是我需要使用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(默认情况下,一个是粗体而另一个不是).对于动画,我把它留给你自定义.您需要更改缓动和背景位置.