CSS 마스크 이미지가 작동하지 않습니다.

Question

CSS 속성 -webkit-mask-image를 사용하여 이미지를 (텍스트 그림자로) 마스크하려고합니다.

은 내가 그러나 내가 어떤 이유로이 사용하는 경우에만 마스크 이미지를

속성을 할 필요가 배경 클립을 사용할 수 있음을 이해합니다. 그러나 그것을 시험해 보았을 때 나는 몇 가지 CSS 코드가 쌓여 있었다.

여기

가 jsFiddle 버전입니다 : 여기

#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; 
} 

은 내가 뭘하려고 오전 이미지의 :

여기 내 CSS 코드의 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>

귀하의 코드는 두 가지 novel-- 애니메이션과 텍스트 그림자를 않습니다. text-shadow의 경우 스팬과 h1이 모두 font-weight : bold (기본적으로 하나는 굵게 표시되고 다른 하나는 표시되지 않음)로되어 있는지 확인했습니다. 애니메이션의 경우 사용자 지정을 위해 사용자가 직접 결정했습니다. 이완 및 배경 위치를 변경해야합니다.