Javascript 如何使除特定元素外的整个页面变暗

您知道当SearchTextBox.focus（）使页面的其余部分变暗时，页面的外观如何吗？

您可以通过使用CSS的z索引来实现这一点

一些警告： 必须将元素的CSS位置设置为“相对”、“绝对”或“固定”。（可能还有其他选择）

此外，您必须在整个页面上设置覆盖，该覆盖的z索引小于您在要显示的表单或元素上设置的z索引

例如：

.page-overlay {
  position: fixed;
  z-index: 300;
  background-color: rgba(23, 23, 23, 0.3);
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}
.form {
  position: absolute;
  top: 0;
  left: 30px;
  height: 300px;
  width: 300px;
  background-color: rgba(.5, .5, .5, .5);
  z-index: 301;
}

---

查看此

您可以使用外部库，如语义用户界面的内置组件dimmer-。否则，您可以使用类似于下面的代码段

正文{
背景图像：url（“http://www.gstatic.com/webp/gallery/4.jpg");
}
.页面覆盖{
位置：固定；
z指数：300；
背景色：rgba（1,1,1,0.7）；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
}
.表格{
位置：绝对位置；
顶部：20px；
文本对齐：居中；
左：30px；
高度：100px；
宽度：300px；
背景色：白色；
z指数：301；
}

一些文本

虽然这可能不是最优雅的解决方案，但当文本区域被聚焦时，可以使用JQuery向特定元素添加类，然后应用CSS样式。例如：

$（“textarea”）.focus（函数（）{
$（“.content”）.addClass（“blur”）；
}).blur（函数（）{
$（“.content”）.removeClass（“模糊”）；
});
.content{
高度：100px；
}
.模糊{
背景颜色：灰色；
-webkit过滤器：模糊（5px）；
过滤器：模糊（5px）；
}


示例文本。


示例文本。

你试过什么吗？我试过得到结果。但这不是一件好事，我想知道这个设计是否有一个标准的解决方案？我想你没有理解我。你进入bing.com并在$（文档）之后点击搜索框。我希望阴影和焦点在特定的元素（文本框）上。你可以用纯CSS设置z索引和焦点位置，但是如果你想在输入的焦点上模糊背景的话。您将需要使用JavaScript。原因是CSS向下级联样式，而不是向上级联样式；因此，由于您的输入可能会嵌套在主体内部，因此JS是您的最佳选择。