最近は拡縮しても画質が変わらないという理由からアイコンにSVG画像を使うことが増えてきました。
しかしCSS上で色替えを可能にしたい場合はインラインで設定するか、 フォント化の手順を踏む必要があり若干手間に感じていました。
今回ご紹介する「mask-image」はそんなコーダーの悩みを解決してくれるCSSです。

「mask-image」とは

「mask-image」は要素のマスクレイヤーとなる画像を指定して使用します。
プロパティはこのほかにもありますが、今回は使用しないので割愛します。

プロパティはbackgroundの指定と似ているので扱いやすいと思います。
「mask」でショートハンド(一括指定プロパティ)で記述できます。

これらのプロパティはIEを除き全てのモダンブラウザの最新版でサポートされていますが、
ほとんどのブラウザでベンダープレフィックス「-webkit-」を追記する必要があります。
今回紹介していないプロパティには一部ブラウザでサポートされていないものもあるので確認してご使用ください。

実際に使ってみる

まずHTMLを用意します。
ボタンの疑似要素をマウスオーバー時に色替えしたい、という使用パターンが多いと思われるのでボタンのHTMLを用意しました。

HTML

<p class="btn"><a href="★URL">ボタン</a></p>

CSS

• 「background」で画像部分のカラーを指定します。
• 「mask-image:url(★画像のパス);」で画像を指定します。png、svgでマスクできます。

※マスク画像はローカル環境でクロスドメインとしてブロックされ表示されない場合があるため、 開発環境をご用意いただくなどして確認する必要があるようです。

.btn a{
	width:170px;
	padding:15px 20px;
	display:block;
	border:1px solid #57b9bf;
	border-radius:30px;
	color:#fff;
	text-align:center;
	text-decoration:none;
	letter-spacing:0.08em;
	font-size:1.4rem;
	background:#57b9bf;
	transition:all .5s;
}
.btn a:after{
	content:"";
	width:24px;
	height:20px;
	margin-left:10px;
	display:inline-block;
	transition:all .5s;
	vertical-align:middle;
	background:#fff;
	-webkit-mask-image:url(img/mask-image/icon-kuma.svg);
	mask-image:url(img/mask-image/icon-kuma.svg);
	-webkit-mask-position:center center;
	mask-position:center center;
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-size:contain;
	mask-size:contain;
}
.btn a:hover{ background:#fff; color:#57b9bf; }
.btn a:hover:after{ background:#57b9bf; }

デモ

実際表示するとこんな感じになります。

デモ

png、svgどちらも見事に背景色でマスクされました。