【画像加工不要】超簡単!CSSだけで背景画像のみを暗くする方法【プログラミング】

プログラミング

おはこんばんにちは!ノボル(@Veritas40835638)です。

背景画像を暗くしたいんだけど、加工するのがめんどくさい…。

画像加工ソフトを使わなくても、CSSだけでできるよ!



Web制作の際、上の文字などを読みやすくするために背景画像を暗くしたいときってありませんか?

しかし、写真を加工せず、CSSの「opacity」プロパティで暗くしようとすると、画像だけでなく文字も暗くなってしまいます

そこで今回は、CSSだけで背景画像のみを暗くする方法をご紹介します!

現役のプロのメンターから学べるオンラインブートキャンプ

CSSだけで背景画像のみを暗くする方法

実現したいこと

今回実現したいことは、以下の通りです。

See the Pen WNvrgRo by monkey d ruffy (@ruffy126) on CodePen.

背景画像のみが暗くなり、白色のテキストは暗くなっていないのがわかると思います。

さっそく、HTMLとCSSの解説をしていきます。

HTML

HTMLは以下の通りです。

背景を指定するdiv.backgroundの中に、テキストの入ったdiv.boxを作成し、「position: absolute;」で浮かせます。

CSS

CSSは以下の通りです。

div.backgroundに背景画像を指定し、「position: relative ;」を適応します。

次に、div.backgroundbefore要素透過させた黒を重ねます
(RGBaのアルファ値は、0〜1で透明度を指定)

div.boxを浮かせているので、 h1やpは暗くなりません

ただし、div.boxを浮かせると、.background::beforeの大きさが0になってしまうため、
context: ‘ ‘;」を指定してあげます。

以上です!

最後に

今回の記事では、CSSだけで背景画像のみを暗くする方法について解説しました。

Web制作で役立つテクニックなので、ぜひ使えるようにしましょう。

最後まで読んで頂き、ありがとうございました(o^^o)

フロントエンドコース

コメント

タイトルとURLをコピーしました