フレームワーク7左パネルの背景画像の問題

Question

サイドパネルの背景画像を設定し、CSSを使用して画像をぼかしました。問題は、画像に何をしても、サイドパネルのテキストとアイコンに同じことが起こることです。だから、イメージの代わりに私のすべてのテキストがぼやけています。私は背景画像を保持するために別のクラスを作成しようとしましたが、同じことが起こります。

.background-image-holder { 
background-image: url(../img/bg.jpg) !important; 
background-size: cover; 
background-repeat: no-repeat; 
filter:blur(5px); 
} 

<div class=“panel panel-left panel-reveal background-image-holder”> 
<div class=“list-block”> 
<div class=“content-block-title”>Navigation</div> 
.... 

Answer 1

リストブロック付きのdivは、ぼかし対象のdiv内にあります。 div "background-image-holder"がぼやけているので、その子どものいずれかに影響が出ます。パネル内ではなく、前後のリストブロックを作成することができます。

純粋なCSSの代わりに

<div class=“panel panel-left panel-reveal”> 
    <div class=“background-image-holder"></div> 
    <div class=“list-block”></div> 
</div> 

は、

https://codepen.io/anon/pen/YQxMba

DIVパネルの前または後のブロックを作成することです