CSSで画像にマスク

CSSで 透過のPNG画像をマスクとして写真に張りつけてみます。

HTMLでマスクとなるタグと画像タグを作成

<div id="photo">
    <span class="photo-mask"></span>
    <img src="image/mask-image.jpg"/>
</div>

画像とマスクを含むタグに対してスタイルを設定（ポジション：relative）

#photo {
  position: relative;
  display: block;
  width: 350px;
  height: 350px;
}

マスクとなる spanタグに対してスタイルを設定（ポジション：absolute）

#photo .photo-mask{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 350px;
  height: 350px;
  background:url(image/mask-mask.png);
}

結果

右のマスク画像は、わかりやすくするために透過の部分をグレーにしています。実際のマスクでは、グレーの部分は透過です。