はじめに
LPなどでよく使われるやつです。こんな感じの完成イメージです。
普段cssを専門に触っているわけではないので、もっと良い方法があればフィードバックください。
実装
::before を使って擬似要素を定義します。
::before (:before)
https://developer.mozilla.org/ja/docs/Web/CSS/::before
例えば、topというクラスを持つdiv要素を対象とする場合、以下のように定義するのがポイントです。
- top::before
- カラー
- top
- 画像のURL
- カラーの透明度
- ぼかし度
htmlとcssのサンプルは以下の通りです。
<div class="top"></div>
.top{
z-index:0;
overflow: hidden;
background-color: rgb(0,163,175);/*半透明カラーの色*/
}
.top::before{
content: '';
background: url('../../assets/img/hogehoge.jpg');/*背景画像のURL*/
opacity: 0.5;/*半透明カラーの透明度*/
filter: blur(8px);/*ぼかし度*/
position: absolute;
/* 参考: http://designcolor-web.com/2016/09/14/css-blur-effects-background/*/
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
z-index: -1;
}