CSS | 画像を部分的にぼかしたりモノクロやセピアにする方法

CSS 画像,CSS

CSS | 画像を部分的にぼかしたりモノクロやセピアにする方法

CSSのbackdrop-filterプロパティを使って画像を背景にして部分的にぼかしたり、モノクロやセピア調にする方法を紹介しています。

画像を部分的にぼかす

backdrop-filterプロパティでblur()を指定して背景を部分的にぼかすサンプルコードです。

See the Pen CSS gradually fade out animation by yochans (@yochans) on CodePen.

HTMLではimgタグの親要素としてdivタグ .container を配置しています。
ぼかし処理はこの親要素に記述していますので必要です。

<div class="container">
	<img class="image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
</div>

親要素 .container をポジションの基準点にするため position: relative を指定します。

親要素の疑似要素として ::after を作成し、backdrop-filterプロパティで blur() を指定しています。
blur() はpx単位など単位で強さを指定可能です。

※テキストが見にくかったので、サンプルでは blur() と輝度を調節可能な brightness() を重ねています。文字入れについては後半に書く予定です。

そのままだと、imgタグについてくる誰得な空白によって少しだけ下にはみ出ますので、imgタグでは vertical-align: top で空白を無くします。

.container {
	width: 500px;
	max-width: 100%;
	position: relative;
}

.container::after {
	content: "";
	position: absolute;
	width: 50%;
	height: 100%;
	backdrop-filter: blur(3px) brightness(60%);
}

.image {
	width: 100%;
	vertical-align: top;
}

画像を部分的にモノクロにする

backdrop-filterプロパティでgrayscale()を指定して背景を部分的にモノクロにするサンプルコードです。

See the Pen CSS | Partially blur the image by yochans (@yochans) on CodePen.

HTMLではimgタグの親要素としてdivタグ「.container」を配置しています。

<div class="container">
	<img class="image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
</div>

親要素 .container をポジションの基準点にするため position: relative を指定します。

親要素の疑似要素として ::after を作成し、backdrop-filterプロパティで grayscale() を指定しています。
grayscale() は0~1、0％～100％の間で強さを指定可能です。

※サンプルでは輝度を調節可能な brightness() を重ねています。

imgタグについてくる謎の空白によって少しだけ下にはみ出ますので、imgタグでは vertical-align: top で空白を無くします。

.container {
	width: 500px;
	max-width: 100%;
	position: relative;
}

.container::after {
	content: "";
	position: absolute;
	width: 40%;
	height: 100%;
	backdrop-filter: grayscale(1) brightness(80%);
}

.image {
	width: 100%;
	vertical-align: top;
}

画像を部分的にセピア調にする

backdrop-filterプロパティでsepia()を指定して背景を部分的にセピア調にするサンプルコードです。

See the Pen CSS | Partially grayscale the image by yochans (@yochans) on CodePen.

HTMLではimgタグの親要素としてdivタグ「.container」を配置しています。

<div class="container">
	<img class="image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
</div>

親要素「.container」をポジションの基準点にするため position: relative を指定します。

親要素の疑似要素として ::after を作成し、backdrop-filterプロパティで sepia() を指定しています。
sepia() は0~1、0％～100％の間で強さを指定可能です。

imgタグについてくる謎の空白によって少しだけ下にはみ出ますので、imgタグでは vertical-align: top で空白を無くします。

.container {
	width: 500px;
	max-width: 100%;
	position: relative;
}

.container::after {
	content: "";
	position: absolute;
	width: 40%;
	height: 100%;
	backdrop-filter: sepia(1);
}

.image {
	width: 100%;
	vertical-align: top;
}

文字入れのサンプルコード

このページにある動作サンプルではbackdrop-filterの上に文字をいれています。

<div class="container">
	<img class="image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
	<p>ONE NOTES</p>
	<ul>
		<li>PHP</li>
		<li>Python</li>
		<li>JavaScript</li>
		<li>CSS</li>
		<li>and more...</li>
	</ul>
</div>

backdrop-filter プロパティは親要素の .container に指定していますので、そのままではテキストはその背面に表示され、見にくい、あるいは見えなくなります。
テキストを前面に表示する簡単な方法として z-index で 2以上の値を指定しておきます。

テキストのデザインで色々書いていますが、最低限必要なのは position: absolute の指定と z-index の指定のみです。

.container p{
	position: absolute;
	left: 10px;
	margin: 0;
	font-size: 28px;
	font-weight: bold;
	color: #4169e1;
	-webkit-text-stroke: 1px #FFF;
	z-index: 2;
}

.container ul{
	position: absolute;
	top: 50px;
	left: 0;
	margin: 0;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	z-index: 2;
}

CSS 画像,CSS

Posted by Yousuke.U