CSSと透過png画像を活用してjpg画像にマスク効果を適用する手順｜DAD UNION

画像をウェブ上で表示する際、異なる形やデザインのマスクを使用してその見た目を変更することは、クリエイティブなデザインや特定のアートワークの要件を満たすための素晴らしい方法です。
この記事では、CSSと透過png画像を使用してjpg画像をマスク表示する方法を詳しく紹介します。

Contents

なぜマスク表示は重要なのか？
必要な画像の準備
マスク表示のためのCSSの記述
HTMLの記述
CSSとpng画像でjpg画像をマスクするデモページ
その他の応用例
まとめ

なぜマスク表示は重要なのか？

マスク表示はデザインの幅を広げ、ユーザーに印象的なビジュアル体験を提供します。
特定の部分のみを強調表示したり、アニメーション効果を追加することで、サイトのエンゲージメントを高めることができます。

必要な画像の準備

透過のpng画像
透過png画像

マスクされるjpg画像

これらの画像を利用して、jpg画像の上にpngマスクを適用します。

マスク表示のためのCSSの記述

次のCSSは、jpg画像をマスク表示するためのものです。
ここでは、#photoエリアを用意し、その上に.photo-maskエリア（背景にpng画像を設定）をレイヤーとして重ねます。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0 15px 0;
	line-height:1.4em;
	text-align:center;
}
.clWrap{
	width:750px;
	margin:0 auto;
}
#photo {
	position: relative;
	display: block;
	width: 152px;
	height: 152px;
	margin:0 auto;
}
#photo .photo-mask{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 152px;
	height: 152px;
	background:url(mask.png);
}
-->  
</style>

HTMLの記述

以下のHTMLは、上記のCSSを適用してjpg画像をマスク表示するためのものです。
ここでは、id=”photo”エリアにimg画像を配置し、その上にclass=”photo-mask”エリア（背景にpng画像を設定）をレイヤーとして設定します。

<div id="idWrap">
<div id="idContents">

	<h1>png画像を上のレイヤーにし、下のjpg画像をマスク表示</h1>
    <div id="photo">
        <span class="photo-mask"></span>
        <img src="i01.jpg" alt="" width="152" height="152" />
    </div><!--/photo-->

</div><!--/idContents-->

</div><!--/idWrap-->