（CSS）
  .sample {
     -webkit-mask-image: url(mask.png);
     mask-image: url(mask.png);
     -webkit-mask-mode: alpha;
     mask-mode: alpha;
  }
 

            （HTML）
                    <div class="sample">
                      <img src="image.jpg">
                    </div>

　　　　　　　　　　　　　　　　　　　　　　　　　

maskプロパティ

    マスク画像の指定
    mask-image：none | url()        
      
    マスク画像のモードを指定  
    mask-mode ：alpha | luminance          
      
    マスク画像の表示スタイルを指定  
    mask-repeat ：no-repeat | repeat-x | repeat-y | space | round       
      
    mask-position       マスク画像の表示位置を指定
    mask-size           マスク画像の大きさを指定
    mask-composite      複数のマスク画像の組合せを指定

mask-repeatプロパティの値

    no-repeat	マスク画像を領域内で繰り返し配置しない
    norepeat-x	マスク画像を横方向に繰り返し配置する
    norepeat-y	マスク画像が縦方向に繰り返し配置する
    nospace	マスク画像を領域全体に間隔を空けて繰り返し配置する
    noround	マスク画像を指定回数、領域内で繰り返し配置する
    
   もし領域内に収まらない場合は、収まるように画像のサイズが自動変更される

（CSS）
.clip {
  background-size: cover;
  background-position: 20% 55%;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: url("img/mizubasyo.jpg");
  color: transparent;
  margin-top: 0px;
  font-family: 'Sigmar One', cursive;
  font-size: 20em;
  line-height: .8em;
  font-weight: bold;
  text-align: center;
}

  （HTML）
   <p class="clip"> CLIP TEXT </p>