背景画像を少し暗くしたいときに今まではopacityを使っていたが、中にあるコンテンツまでも暗くなってしまう。背景画像がだけ暗くして、中にある要素はそのままにしたいときはどうするのか？
背景画像のところにposition:relativeを設定して、その要素にbeforeを当ててposition:absolute;を指定、そこに
top:0;
left:0;
bacgkround:自分が暗くしたい内容；
に設定。
中にある、文字が書かれている要素にposition:relativeを使うことによって背景画像要素の内容が被らないようになる。
背景画像だけが暗くなり、中の要素は暗くならないようにできる。
More than 3 years have passed since last update.
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme