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. 你可以用一个pseudo-elementlike: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>  

让我知道是否有帮助