模糊身体中的所有元素

Question

我试图模糊屏幕上的所有内容,除了加载动画.这就是我尝试过的.

$("#addall").click(function() {
  $('#loading').show();
  $('body:not(#loading)').css("filter", "blur(3px)");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simple-loading" style="display: none" id="loading">
  <div class="active dimmer">
    <div class="text loader">Loading...</div>
  </div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat id nisi eget egestas. <a id="addall" href="javascript:void(0)">Load.</a> Nullam luctus ac ipsum vel blandit. Cras eu felis ac lorem porta egestas. Sed interdum cursus ligula, sit amet euismod velit volutpat at. Fusce luctus scelerisque mollis. Praesent ligula neque, vehicula elementum justo sed, egestas accumsan eros. Suspendisse at est eget nunc efficitur vestibulum. Suspendisse potenti. Pellentesque quis fermentum ligula.</div>

我也试过了

$("body").each(function(event) {
    if (event.target.id != "loading") {
        $(this).css("filter","blur(3px)");
    }
});

它永远不会有效......有什么好的解决方案吗？

Answer 1

问题是你的选择器适用于所有body元素,然后选择那些没有ID的元素loading.由于只有一个body元素,并且它确实没有此ID,因此选择它.当然,这不是你想要的.您想要选择元素的所有子body元素,然后过滤那些没有loadingID 的元素.

选择器需要body > *:not(#loading).

为了澄清:这个选择器选择所有的元素(*)......
作为body(body > *)的子元素
......并且没有ID loading(*:not(#loading)).

这使用子选择器(spec)和否定伪类:not()(spec).

body > *:not(#loading) {
  background: #ffd83c;
  filter: blur(3px);
}

div, p {
  margin: 10px;
  padding: 5px;
}

<div>Some DIV.</div>
<div id="loading">Loading DIV</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>

Answer 2

试试这个

您只能使用css实现此目的.不需要JQUERY

请参阅以下代码

body > *:not(#loading) {
  filter: blur(3px);
}

<div>Some DIV.</div>
<div id="loading">Loading DIV
    <div style='padding:15px;'>Some other DIV inside loading div.</div>
</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>

Answer 3

遗憾的是,您不能模糊HTML节点而不会模糊其子节点.

一种解决方案是将您的内容和加载图像div放在父级内的两个s中div,如下所示.

<div id="parent_div" style="position:relative;height:300px;width:300px;">
    <div id="background" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red;filter: blur(3px);z-index:-1;"></div>
    <div id="loading">Spinner...</div>
</div>

要模糊/ unblur只是做$('#background').css('filter', 'blur(3px)).