HTML構造を変更せずに疑似要素「::before」で背景マスクを追加する

HTML/CSS

この記事は以前にご紹介した「背景画像を透過風にする」と同じ効果を得るものです。

課題

下のようなケースでは、背景画像を薄くしてコンテンツを通常通りに表示させたいことがあります。
コンテンツ コンテンツ コンテンツ 

透過による対策

単純に背景画像要素を透過すると子要素まで透過が継承されてしまうので、コンテンツも薄くなってしまいます。
コンテンツ コンテンツ コンテンツ
背景画像要素に対してコンテンツ要素をabsoluteでかぶせる手もありますが、レスポンシブなどで厄介な処理が発生しそうです。

疑似要素「::before」による透過マスクでの対策

これらを改善する一方法として、背景画像の疑似要素「::before」を利用してコンテンツとの間に透過マスクを挟む方法があります。
利点としてhtml構造はそのままで対応できます。
コンテンツ コンテンツ コンテンツ
【※1】疑似要素 .layerImage::before の opacity は .frontContents に継承されますが、z-index:1; とすることで継承を免れることができるようです。

(※ 当ページは社内技術資料としての位置付けですので読みにくいこともあるかもしれませんが、一般の方の課題解決に役立てれば幸いです。)

弊社サイトご案内

弊社ではデザイン会社様やウェブサイト制作会社様との提携・協業を随時お願いしております。

関連記事一覧

わぷー WordPress化お見積り