css - 模糊没有背景图像

Question

我(为我)为 Cinnamon 创建主题，我想在 Cinnamon 面板上获得模糊效果，但我不知道该怎么做。我知道如何对此模糊不清:

.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>  

但请记住:我需要模糊背景图像，而不是我自己的图像。 谢谢。

Answer 1

如果您不能更改您的 HTML 结构来添加一个新的 div 来添加 background-image 和 blur 。你可以使用伪元素，比如: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>  

如果有帮助请告诉我