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

带有list-block的div位于被模糊的同一div中。作为div“背景图像持有者”，模糊，任何一个孩子都会受到影响。您可以在面板中创建一个单独的div，但在list-block之前/之后。

<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

框架7左侧面板背景图像问题

1 个答案: