セクションにフィルタを適用する背景画像

フルスクリーンのヘッダーイメージといくつかのセクションがあるonepager-scrolldownウェブサイトがあります。今、いくつかのセクションに背景画像を適用することにしました。私が持って明確にどのような構造にするために、ここでは一つのセクションに続くヘッダを持つ単純なコードサンプルです：セクションにフィルタを適用する背景画像

HTML：

<body> 

    <header></header> 

    <section class="bg-test"> 
     <div class="container"> 
      <div class="row"> 
       <p>test</p> 
       <p>test</p> 
       <p>test</p> 
       <p>test</p> 
       <p>test</p> 
       <p>test</p> 
       <p>test</p> 
       <p>test</p> 
      </div> 
     </div> 
    </section> 

</body>

はCSS：

html, 
body { 
    height: 100%; 
    width: 100%; 
} 
header { 
    position: relative; 
    width: 100%; 
    min-height: auto; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
    background-position: center top; 
    background-image: url('../img/header.jpg'); 
} 
.bg-test { 
    background-image: url('../img/header.jpg'); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
}

今、私が追加したいと思いますセクションの背景画像（明らかに画像のみで、画像の前のテキストではありません）にフィルタプロパティ（ぼかしフィルタなど）を適用します。それを達成するために、私はこのトピックでのアプローチに従ってみました：

How to apply a CSS3 Blur Filter to a background image

私はしかし、それを作ることができなかった、私の状況（全体ではなく、ページの部分だけ）にコードサンプルを適応しようとしました作業。私はそれが固定ヘッダーイメージとの相互作用に起因すると信じています。

誰かがとても親切で、私を助けてくれますか？ありがとうございました！

出典

2017-07-14 Adrian

あなたは:beforeに背景を追加し、コンテンツの後ろにそれを置くことができます。

.bg-test { 
    position:relative; 
    background:none; 
} 
.bg-test:before { 
    content:""; 
    display:block; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    z-index:-1; 

    /* Add Blur */ 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 

    /* Background */ 
    background-image: url('../img/header.jpg'); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
}

出典

2017-07-14 08:26:07 rblarsen

をありがとう！今は完璧に動作します。 :-) "z-index：-1"の後に小さなスペルミスがありました。将来の参照のためにそれを変更したい場合に備えてです。 – Adrian

ああ、私の間違いに言及してくれてありがとう - それは今修正されました:-) – rblarsen

セクションにフィルタを適用する背景画像

答えて

関連する問題