除了我刚刚单击的文本字段，如何使整个页面模糊？

Question

I have a text field top of my website. Now when someone focus on that text field, except that text field everything else available on body will be blur. How to do that? Thanks.

Answer 1

This is easy with jquery:

 $(document).ready(function(){ $('#mytext').focus(function(){ $('body').find('*').not('#mytext').addClass('blur'); }); $('#mytext').blur(function(){ $('body').find('*').not('#mytext').removeClass('blur'); }); }); 

 li{ background: red; } .blur { filter: blur(10px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="mytext"> <ul> <li>lorem</li> <li>lorem</li> <li>lorem</li> <li>lorem</li> <li>lorem</li> </ul> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quaerat fugiat culpa animi voluptas at explicabo labore consectetur dignissimos tempora. Libero praesentium quibusdam tempora molestiae nesciunt, unde, molestias quam? Commodi.</p> 

Answer 2

CSS does offer a filter: blur(...) option, but it's experimental and subject to change. Here's a blog post with example .

Note that once a parent element is blurred, a child element can't be un-blurred. So you'd have to apply the blur class to all of the elements that don't include your text box as a child. This could be tricky to get right.

A more common option on the web is to put a darkened overlay, for example a full-page element with background-color: rgba(42,42,42,0.7); on top of your page, and use z-index or similar to get your input element to pop on top of that. This is generally simpler and more widely-supported than selective blurring.