ララベルで背景画像を透過させる

1298 ワード
bootstrap4 Laravel6 bootstrap4 テキストリンク

背景画像を透過させる

背景画像を使用していると画像の主張が強くて文字が見えにくいという人もいると思います！
その際に画像を薄くするといった方法を紹介しようと思います！
こちらはログイン画面です
今は通常の画像となっています

こちらが薄くした画像となります！
この画面では透過させる意味はあまりなさそうですが文字などのコンテンツが多いページでは画像を透過させることで文字などが見やすくなります！

それではコードの方の紹介をします

app.blade.php
<body style="background:url({{ asset('images/image02.jpg') }}); background-size:cover; background-color:rgba(255,255,255,0.5);
    background-blend-mode:lighten;">

このbackground-color:rgba(255,255,255,0.5);の0.5の数値を調整することで薄さの調整ができるので個人の好みでしてみてください！
background-blend-mode:lighten;も忘れずに書いてください！

まとめ

今回はララベルで背景画像を透過させる方法について紹介しました！
この書き方がおそらくわかりやすいと思うので、よければ試してみてください！