Question

我为Cinnamon创造主题（对我来说），我希望在肉桂面板上获得模糊效果，但我不知道该怎么做。我知道如何模糊：

＆＃13;

.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);
}

＆＃13;

<div class="moreblur"></div>

＆＃13;

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

Answer 1

如果您无法更改HTML结构，请添加要添加div和background-image的新blur。你可以使用像pseudo-element

这样的:before

见下面的代码段

＆＃13;

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

＆＃13;

<div class="moreblur">
  <p>
  I am NOT Blured
  </p>
   <p>
  I am NOT Blured
  </p>
   <p>
  I am NOT Blured
  </p>
  
</div>

＆＃13;

让我知道是否有帮助

没有背景图像的模糊

1 个答案: