CSS | 画像に透過グラデーションをかける方法

2021-11-23CSS グラデーション,CSS 画像,CSS

CSSで画像に（疑似）透過グラデーションをかける方法を紹介しています。

※透過グラデーションと表記していますが、背景色と同色に透過色のグラデーションを画像の上からかけているだけで画像そのものを透過表示しているわけではありません。英語圏ではFake Opacityと呼ばれたりしている方法です。

画像に透過グラデーションをかける

サンプルではデフォルトの白背景に対して表示している画像が透過グラデーションされているようにみせています。

See the Pen CSS | Photo-like edging on the image by yochans (@yochans) on CodePen.

background-imageを使う方法もありますが、当サンプルではimgタグに対して透過グラデーションを指定しています。
HTMLは画像を入れるコンテナ要素のdivタグとimgタグを利用しています。

<div class="container">
	<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg">
</div>

コンテナ要素（.container）に擬似要素::afterを使って、そこにlinear-gradient()プロパティで透明色（transparent）と白（#FFF）のグラデーションを指定しています。

.container {
	position: relative;
	max-width: 100%;
	width: 300px;
	height: 200px;
}

.container::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 200px;
	background-image: linear-gradient(180deg, transparent 0 60%, #FFF 100%);
}

.container img {
	width: 100%;
}

グラデーションの方向

グラデーションの方向は角度（deg）またはオプション文字列によって指定可能です。

サンプルでは、180deg=下向きを指定しています。角度での指定は斜めなど簡単に調節可能かと思います。

透過範囲のバランス調整方法

linear-gradient()プロパティはひとつの色に対して2つまでのオプション値を指定可能です。
1つ目は開始位置、2つ目はそこまではその色のままにしておく位置。

0% 50% とした場合は開始位置から半分まではグラデーション処理はされずその色になります。
50%以降から次の色へのグラデーションが開始されます。

例えばlinear-gradient(180deg, transparent 0 50%, #FFF 50 100%)とした場合はくっきり背景色と境界になるため画像が半分しかないように表示されます。

（疑似）透過範囲の開始位置は配分を調節する場合は、例えばlinear-gradient()で指定している透過色（transparent）にしている2つ目の数値を調節します。

50%が2つ目の値を指定していないデフォルトの状態で、0％に近いほどより透過範囲が広がり、100％に近いほど透過範囲は狭くなります。