「ぼかし」のヘッダーに画像を使用する

Question

背景画像をぼかすようにしようとしていますが、その上にテキスト、ボタンがありますが、ぼかしもテキストやボタンをぼかしています2つを分ける方法を確認してください。

header { 
 
    background: url("street-238458.jpg") no-repeat center; 
 
    -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */ 
 
    filter: blur(5px); 
 
    background-size: 100% 100%; 
 
    height: 630px; 
 
}

<header> 
 

 
<div class="container-fluid"> 
 
<div class="text-center"> 
 
<h1 class="heading">My h1 is here... blah blah</h1> 
 
<p>We help people out, every day.</p> 
 
<button class="btn btn-lg btn-danger heading" href="#">This is the button</button> 
 
</div> 
 
</div> 
 

 
</header>

Answer 1

あなたのヘッダーの2つの異なるコンテナを持つことができるので、あなたはコンテンツに影響を与えずに、バックグラウンド・コンテナのスタイルをすることができます。コメントの参照をチェックしてください。

Answer 2

このpenはあなたの探しているものである必要があります。それぞれの所有者に信用。 トリックは2つの別々のコンテナを持つことですが、外側コンテナにはバックグラウンドイメージが必要です。

.content:before { 
    content: ""; 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: -1; 

    display: block; 
    background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG'); 
    width: 1200px; 
    height: 800px; 

    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}