0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

###背景画像を透過させる
背景画像を使用していると画像の主張が強くて文字が見えにくいという人もいると思います!
その際に画像を薄くするといった方法を紹介しようと思います!スクリーンショット 2020-08-25 11.54.21.png
こちらはログイン画面です
今は通常の画像となっています
スクリーンショット 2020-08-25 12.03.40.png
こちらが薄くした画像となります!
この画面では透過させる意味はあまりなさそうですが文字などのコンテンツが多いページでは画像を透過させることで文字などが見やすくなります!
###それではコードの方の紹介をします

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;も忘れずに書いてください!
###まとめ
今回はララベルで背景画像を透過させる方法について紹介しました!
この書き方がおそらくわかりやすいと思うので、よければ試してみてください!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?