CSS |模糊图像

Question

我使用这个加载器微调器使用 css 和 jquery。我想模糊背景，除了来自 URL 的图像。任何想法 ？

CSS:

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
background: url("http://enjoycss.com/bg-img/custom/107898-1py1ieu.1zm9.gif") 
center no-repeat #33333308;
}

Js

<script>
  $(window).load(function() {
  $(".se-pre-con").fadeOut("slow");;
  });
</script>

谢谢

Answer 1

当显示 gif 时，您可以向主体添加一个 :before 伪元素。模糊效果可能很难实现，我建议使用模糊的 PNG 或 svg 作为背景，在下面的代码片段中我只使用颜色:

body:before{
  content:'';
  background-color: #dbdbdb;
  opacity: 0.7;
  background-size: cover;
  width: 100%;
  padding-bottom: 100%;
  position: fixed;
  z-index: 1;
}

您可以用一个类替换正文选择器，然后使用一些 jQuery 删除或添加该类到正文。

引用这个 fiddle :https://jsfiddle.net/3r1zc9gw/3/