Question

我的网站顶部有一个文本字段。现在当有人专注于该文本字段时，除了文本字段外，其他所有可用内容都将模糊。怎么做？感谢。

Answer 1

CSS确实提供filter: blur(...)选项，但它是实验性的，可能会发生变化。这是一个blog post with example。

请注意，一旦父元素模糊，子元素就不会被模糊。因此，您必须将blur类应用于所有不包含文本框的元素作为子元素。要想做对，这可能很棘手。

网络上更常见的选项是在页面顶部放置一个黑暗的叠加层，例如带有background-color: rgba(42,42,42,0.7);的整页元素，然后使用z-index或类似内容来获取输入元素弹出它。与选择性模糊相比，这通常更简单，更广泛支持。

Answer 2

使用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>

除了我点击的文本字段外，如何模糊整个页面？

2 个答案: