Question

当SearchTextBox.focus（）使页面的其余部分变暗时，您知道它看起来像bing页吗？

Answer 1

您可以通过在CSS中使用z-index来实现此目的。

一些警告：您必须将元素的CSS位置设置为“relative”，“absolute”或“fixed”。（可能还有其他选择）。

此外，您必须在整个页面上设置一个叠加层，它比您在要显示的表单或元素上设置的索引更小。

示例：

.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;
}

查看此Fiddle

Answer 2

您可以使用外部库，如Semantic UI的内置组件dimmer - Semantic UI Dimmer。否则，您可以使用与下面类似的代码段。

body {
  background-image: url("http://www.gstatic.com/webp/gallery/4.jpg");
}

.page-overlay {
  position: fixed;
  z-index: 300;
  background-color: rgba(1, 1, 1, 0.7);
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

.form {
  position: absolute;
  top: 20px;
  text-align: center;
  left: 30px;
  height: 100px;
  width: 300px;
  background-color: white;
  z-index: 301;
}

<div class="page-overlay">
</div>
<div class="form">
  some text
</div>

Answer 3

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

$("textarea").focus(function(){
    $(".content").addClass("blur");
}).blur(function(){
    $(".content").removeClass("blur");
});

.content{
  height: 100px;
}

.blur {
  background-color: grey;
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

<html>
<body>
  <div class="content">
    <p>
        Example text.
    </p>
  </div>

  <TextArea>
  </TextArea>

  <div class="content">
    <p>
        Example text.
    </p>
  </div>
</body>
</html>

请注意，此解决方案将要求您使用JQuery手动定位要模糊的每个元素（现在它只针对'content'div中的任何内容，而TextArea不能是其中一个的子元素元素，除非你定义CSS规则以防止它模糊。

Codepen

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

3 个答案: