2016-08-12 15 views
0

シナモンのテーマ(私にとって)を作成していますが、シナモンのパネルにぼかし効果を加えたいのですが、どうやってそれを行うのか分かりません。背景なしのぼかし

.moreblur { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 

 
    display: block; 
 
    background-image: url(http://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-valley-winter-1366x768.jpg); 
 
    width: 1200px; 
 
    height: 800px; 
 

 
    -webkit-filter: blur(10px); 
 
    -moz-filter: blur(10px); 
 
    -o-filter: blur(10px); 
 
    -ms-filter: blur(10px); 
 
    filter: blur(10px); 
 
}
<div class="moreblur"></div>

をしかし覚えている:私はこれにぼかしを取得する方法を知っている私は、背景画像ではなく、自分自身の画像にぼかしを取得する必要があります。おかげさまで

+0

利用の不透明度を助けなら、私に知らせてスニペット使用することができます。 – San

+0

あなたはあなたが持っているもののコードを表示する必要があります...持っていないものではありません。 –

+0

重複 - http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image –

答えて

0

background-imageblurを追加する新しいdivを追加するようにHTML構造を変更できない場合は、あなたの.moreblurクラスで0.3(任意の値):あなたはpseudo-element:beforeよう

は、以下を参照してください

.moreblur { 
 
    position: fixed; 
 
    width: 1200px; 
 
    height: 800px; 
 
} 
 

 
.moreblur:before { 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
    display: block; 
 
    background-image: url(http://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-valley-winter-1366x768.jpg); 
 
    -webkit-filter: blur(10px); 
 
    -moz-filter: blur(10px); 
 
    -o-filter: blur(10px); 
 
    -ms-filter: blur(10px); 
 
    filter: blur(10px); 
 
    position: fixed; 
 
    width:100%; 
 
    height:100%; 
 
    content:""; 
 
    z-index:-1; 
 
}
<div class="moreblur"> 
 
    <p> 
 
    I am NOT Blured 
 
    </p> 
 
    <p> 
 
    I am NOT Blured 
 
    </p> 
 
    <p> 
 
    I am NOT Blured 
 
    </p> 
 
    
 
</div>
はそれが

+0

これはうまくいきます! :) – JakiHappyCity

関連する問題