模糊没有背景图像

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-element 比如 :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>

如果有帮助请告诉我

模糊没有背景图像

blur without background image

css

cinnamon