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

Question

깃발이 아래의 h2 텍스트를 채우지 않는 이유에 대한 아이디어가 있으십니까? 데브 URL : http://runnerupapparel.com/building/ (정보 패널)

배경 URL이 제대로 연결되어 http://runnerupapparel.com/building/images/usa.png

h2.usa { 
    background-size: 100px auto; 
    -webkit-mask-image: url(../images/usa.png); 
    -o-mask-image: url(../images/usa.png); 
    -moz-mask-image: url(../images/usa.png); 
-ms-mask-image: url(../images/usa.png); 
mask-image: url(../images/usa.png); 
letter-spacing: -2px; 
font-weight: bold; 
} 

Answer 1

당신이 달성하려고하는 효과는 무엇입니까?

사용중인 이미지는 전체적으로 100 % 불투명합니다. mask-image은 사용 된 png 이미지의 투명도가 다른 경우에만 유용합니다. 기본적으로 png 이미지의 투명성 속성을 사용중인 모든 것에 적용합니다. 무슨 뜻인지의 더 나은 예를 들어

는 : http://www.benbarnett.net/2010/11/01/css3-text-effects-with-webkit-masking/ 나는 당신의 이미지를 촬영 한

, 흰색있는 모든 영역 (그들에게 투명하게)를 채도, 신속하게 제거. 내가 편집 한 개 mask-image URL을 교체하고 당신은 차이를 볼 수 있습니다. (예 크롬)이이 시간에, mask-image는 웹킷 브라우저에서 작동 주목할 가치가있다 http://i49.tinypic.com/xe278p.png

합니다.