シュウ

今回は【CSS】半透明のフィルターを設置についての解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ!! rgba,filterを学べます！
• 画像や要素の上にうっすらと色を重ねて、テキストなどのコンテンツを見やすくするテクニックです。

フィルターについて

Webサイトのデザインをしていると、「背景の画像が綺麗なんだけど、その上に乗せた文字が読みにくい…」と感じることがよくありますよね。

画像や要素の上にうっすらと色を重ねて、テキストなどのコンテンツを見やすくするテクニックです。今回は、初心者の方でも簡単に実装できる方法を解説します！

rgba()と、filterの違いは？

「フィルター」という言葉が二つの異なる意味で使われているため、rgba()と、filterとでは全く異なります。

rgba()でのフィルター（オーバーレイ）

background-color: rgba(0, 0, 0, 0.3);

これは、要素の上に半透明の色のレイヤーを重ねることで、背景の要素を暗くしたり色味を加えたりする手法です。

filterでのフィルター（CSSフィルター関数）

filter: contrast(30%);

CSSのfilterを使って、要素の視覚的な表現そのものを変更する手法です。
Photoshopなどの画像編集ソフトのフィルター機能に近いものです。

rgba()でのフィルターの指定方法

「背景の画像を少し暗くして、その上の文字を読みやすくしたい」
::before擬似要素を使った半透明のオーバーレイ（rgba()）が断然良いです。
これによって背景は暗くなりますが、元の画像の質感や色はほぼ保たれ、文字が浮き上がって見えます。

rgba()でのフィルターの指定方法

SHU BLOG

<div class="filtercss-rgba">
	<div class="img"><img src="sample.jpg" alt="サンプル" 省略 ></div>
	<div class="ttl">SHU BLOG</div>
</div>

.filtercss-rgba {
	position: relative;  /* テキストを中央にするため指定 */
}

.filtercss-rgba .img {
	position: relative;  /* フィルターをかけるため指定 */
}

 /* 以下　必須 */
.filtercss-rgba .img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.ttl {
	position: absolute;
	top: 50%;
	left: 50%;  transform: translate(-50%, -50%); 
}

filterでのフィルターの指定方法

「背景画像のコントラストを下げて、より柔らかい、または霞んだような視覚効果を与えたい」
filter: contrast(30%)が適しています。
これは画像そのものの視覚的な性質を変更します。

filterでのフィルターの指定方法

contrast10

contrast30

contrast60

contrast90

<div class="filtercss-filter">
	<div class="img contrast10"><img src="sample.jpg" alt="サンプル"></div>
	<div class="ttl">contrast10</div>
</div>
<!--contrast30 以下は省略-->

.filtercss-filter {
	position: relative;  /* テキストを中央にするため指定 */
}
.filtercss-filter .contrast10 {filter: contrast(10%);}
.filtercss-filter .contrast30 {filter: contrast(30%);}
.filtercss-filter .contrast60 {filter: contrast(60%);}
.filtercss-filter .contrast90 {filter: contrast(90%);}

まとめ

今回はこれで以上です。

< 前の記事

【CSS】要素を中央配置について解説！