除一个元素外，如何使页面变灰？

Question

如何在页面上显示灰色叠加层，但该页面中的一个元素没有显示为灰色？

有很多这样的问题，但是没有一个起作用：

• 隐藏除一个div以外的所有元素以进行打印视图 -此情况不适用于我的情况，因为我不想隐藏所有内容。
• 禁用除DIV元素之外的所有内容 -这第二个答案似乎与我的相似。但是，即使我更改了所需的非灰色元素的z-index，整个页面仍保持灰色。另外，我发现使用div和之间没有区别iframe。
• 想要使除指定div之外的整个页面都呈灰度 -这只是使其他所有内容变为灰度，但我不希望这样。

在下面的示例中，我希望除之外的所有内容都变灰<input class="edit-title" value="Site Title">。现在，我的代码使页面的大部分显示为灰色，如果我进行更改，则可以将整个页面显示为灰色

.overlay {
  z-index: -1;
}

至

.overlay {
  z-index: 0;
}

有没有一种方法可以使除以外的所有内容灰显<input class="edit-title" value="Site Title">？

.overlay {
  z-index: -1;
}

.overlay {
  z-index: 0;
}

https://jsfiddle.net/qyca9489/

Answer 1

可以使用 css 来完成box-shadow。

.box{display:inline-block; width:100px; height:100px; margin-top:50px; text-align:center; padding-top:2em}
.box.selected{
    box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5);
}

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box selected">Box 3</div>
<div class="box">Box 4</div>

使用 4 个叠加元素的替代解决方案

叠加层根据突出显示的元素位置和尺寸进行定位。

顶部和底部叠加层的宽度为 100%。顶部只需要将其高度设置为突出显示元素的顶部偏移值。底部的将其顶部设置为元素的底部。

左右与突出显示的元素高度相同，并到达页面的每个边缘以填充顶部和底部叠加层之间的孔

var $el = $('.box.selected'),
  $oLay = $('.overlay'),
  elPos = $el.offset(),// coordinates of element within document
  elH = $el.height(),
  elW = $el.width();

$oLay.filter('.top').height(elPos.top);

$oLay.filter('.left').css({
  top: elPos.top,
  height: elH,
  width: elPos.left
});

$oLay.filter('.right').css({
  top: elPos.top,
  height: elH,
  left: elPos.left + elW
});

$oLay.filter('.bottom').css({
  top: elPos.top + elH
});

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-top: 50px;
  text-align: center;
  padding-top: 2em
}

.overlay {
  position: absolute;
  background: rgba(0, 0, 0, .5);
  z-index: 100
}

.overlay.top {
  top: 0;
  left: 0;
  width: 100%
}

.overlay.left {
  left: 0
}

.overlay.right {
  right: 0
}

.overlay.bottom {
  width: 100%;
  left: 0;
  bottom: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box selected">Box 3</div>
<div class="box">Box 4</div>


<div class="overlay top"></div>
<div class="overlay left"></div>
<div class="overlay right"></div>
<div class="overlay bottom"></div>