親要素の背景画像をぼかし、追加した子要素に背景画像を継承させる方法を紹介します。
背景を設定
「pic-background」クラスに「background-image」を制定し背景を設定。「background-size: cover;」で画像を全体を覆うように縮小させます。
<div class="container pic-background"></div>
.pic-background {
background-image: url(...);
background-size: cover;
background-position: center;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
z-index: 0;
}背景をぼかす
before疑似要素で「filter」プロパティを使用し「blur」でぼかしを入れ、「brightness」で少し暗くしています。
<div class="container pic-background"></div>
.container {
position: relative; ...
}
.container::before {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background: inherit;
filter: blur(10px) brightness(85%);
content: '';
z-index: -1;
}
影をぼかした枠を中央に表示する
「box」クラスを指定した要素を追加し「background: inherit;
」で背景画像を継承。「box-shadow」でぼかしを入れ、浮き出るようにしてます。
<div class="container pic-background">
<div class="box">
<h1>CSSで...</h1>
</div>
</div>
.box {
padding: 4rem;
box-shadow: 0 0 15px rgba(0, 0, 0, .3);
border-radius: 5px;
background: inherit;
}
h1 {
color: #fff;
text-shadow: 0 0 15px #000;
font-weight: bold; ont-size: 26px;
line-height: 1.5; text-align: center;
}
