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删除该类或将其添加到主体中。

请参阅此提琴供参考：https://jsfiddle.net/3r1zc9gw/3/

CSS |图像背后模糊

1 个答案: