CSS3を使用してdivの後ろのぼかしコンテンツ

絶対/固定要素の背景にぼかしを適用する際に問題が発生しました。これは、ページのメインコンテンツをぼかすように見えないため、絶対要素自体の内容。私は現在、次のように私の警告のためのスタイルを持っている：CSS3を使用してdivの後ろのぼかしコンテンツ

.alert-wrap { 
    position: fixed; 
    z-index: 10; 
    right: 0; 
    bottom: 0; 
} 

.alert-wrap .alert { 
    display: block; 
    background-color: rgba(215, 44, 44, 0.5); 
    margin: 0 15px 15px 0; 
    position: relative; 
} 

.alert-wrap .alert:before { 
    content: ""; 

    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

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

}

私はその背後にある主な内容は思えぼやけ（要素自体にもっと焦点を適用）すること、これは警告要素の背景をぼかし持って探していますしかし、この問題がまったく存在することを確認しても何も見つけられませんでした。

HTMLドキュメントフローは次のとおりです。

<html> 
    <head> 
     <!-- Header Stuff Deleted --> 
    </head> 

    <body> 
     <div class='alert-wrap'> 
      <div class='alert'> 
       <div class='head'> 
        Notifications 
       </div> 
       <div class='body'> 
        Alert content here 
       </div> 
      </div> 
     </div> 

     <?php 
      //constructing navbar 
     ?> 

     <div class='content'> 
      Some content here 
     </div> 

     <?php 
      //constructing footer 
     ?> 
    </body> 
</html>

画像例：

example

出典

2015-10-21 Necrone

HTMLを表示します。 – makshh

@makshh追加されたHTML – Necrone

ぼやけた要素に背景が適用されていないため、ぼかしするものがないため、問題があります。 – makshh

私は、これはlike thisをよりよく扱われる...コンテンツをぼかしについてコメントのためにこれを更新しました。

これにより、背景とすべてのコンテンツはぼかされますが、アラートはぼかされます。

HTML：

<div id="alert"> 
    Lorum Ipsum Delorum Alert! 
</div> 

<div class="content" id="example"> 
    Blah Blah Blah Blah Blah Blah Blah Blah Blah 

    <div onclick="document.getElementById('example').className='alerting';document.getElementById('alert').style.display='block';">Go</div> 
</div>

CSS

.content { 

} 

.alerting { 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    -o-filter: blur(10px); 
    -ms-filter: blur(10px); 
    filter: blur(10px); 
} 

#alert { 
    display: none; 
    width: 300px; 
    height: 100px; 
    position: fixed; 
    top: 100px; 
    left: 0; 
    text-align: center; 
    width: 100%; 
}

出典

2015-10-21 19:40:32 Fenton

私は実際には私の警告の下にあるコンテンツをぼかして、私はこのソリューションを数回見てきましたが、検索していましたが、どうもありがとうございます。 – Necrone

アラート以外のすべてのコンテンツをぼかすように更新しました。 – Fenton

正確ではないが、OPにいくつかの画像を追加して、より明確にすることを望む – Necrone

これはthis questionの重複のように聞こえます。 CSSぼかしフィルタは、要素自体に適用されます。 background-filterはrecently introduced in the webkit nightlyであった。現在のブラウザで動作するフォールバックの場合 - キャンバスを使用しているにもかかわらず - this answer.

出典

2015-10-21 21:14:00 Dre

CSS3を使用してdivの後ろのぼかしコンテンツ

答えて

関連する問題