Framework 7 左面板背景图像问题

Question

我为侧面板设置了背景图像，并使用 CSS 模糊了图像。问题是无论我对图像做什么，侧面板中的文本和图标都会发生同样的情况。所以，我所有的文字都是模糊的，而不仅仅是图像。我什至尝试创建一个不同的 class 来保存背景图片，但同样的事情发生了。

.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

带有 list-block 的 div 在被模糊处理的 div 中。由于 div "background-image-holder" 是模糊的，它的任何子项都会受到影响。您可以在面板中创建一个单独的 div，但 before/after 列表块。

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

或者在纯 css 中，为 div 面板

创建一个前块或后块

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

Framework 7 左面板背景图像问题

Framework 7 left panel background image issue

css

html-framework-7