HTML

<div class="body" style="height:300px;">
 <div class="section">
 <h1>背景をぼかすボックス</h1>
 <p>CSS Filter の効果で背景をぼかしています。</p>
 </div>
</div>

CSS

.body{
 padding:3em;
}
.section h1,.section p{
 text-align:center;
 display:block;
}
.body ,.section{
 background:url("https://tenman.info/labo/css/files/vegetable.jpg");
 background-position: center;
 background-size: cover;
 background-attachment: fixed;
 border:1px solid #000;
 position:relative;
}
.section{
 z-index:1;
}
.section:before {
 content: " ";
 -webkit-filter: blur(4px);
 -ms-filter: blur(4px);
 filter: blur(4px);
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 border:1px solid red;
 background:url("https://tenman.info/labo/css/files/vegetable.jpg");
 background-attachment: fixed;
 background-position: center;
 background-size: cover;
 z-index:-1;
}

新着記事