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

如何在页面上创建灰显覆盖，但该页面中有一个元素未灰显

有很多这样的问题被问到，但没有一个有效：

• -这个不适合我的情况，因为我不想隐瞒一切
• -这一个第二个答案似乎与我的相似。但是，即使我更改了所需的未着色元素的z索引，整个页面仍保持为灰色。另外，我发现使用

  div

  和

  iframe

  没有区别
• -这只会让其他东西都变成灰色，但我不想那样

从下面的示例中，我希望所有内容都灰显，除了

。现在我的代码会使大部分页面变灰，如果我改变，我可以使整个页面变灰

.overlay {
  z-index: -1;
}

到

除了

，还有什么方法可以将所有内容灰显

html{
框大小：边框框；
}
.覆盖{
排名：0；
底部：0；
右：0；
左：0；
位置：绝对位置；
背景：rgba（0,0,0,4）；
z指数：-1；
}
编辑标题{
z指数：100；
}
*,
*：之前，
*：之后{
框大小：继承；
}
身体，
输入，
optgroup，
选择，
文本区{
字体系列：-苹果系统、BlinkMacSystemFont、“Segoe UI”、Roboto、Oxygen Sans、Ubuntu、Cantarell、“Helvetica Neue”、无衬线；
}
身体{
字体大小：13px；
线高：1.4；
颜色：#555；
保证金：0；
填充：0；
背景：白色；
溢出x：隐藏；
}
.按钮{
字体大小：粗体；
颜色：#fff；
边框：1px实心#44aa76；
边框宽度：0 3px 0；
背景色：#66cc98；
填充物：5px；
边界半径：6px；
文本对齐：居中；
}
.按钮：焦点，
.按钮：悬停，
.主动{
光标：指针；
背景色：#44aa76；
颜色：#fff；
大纲：无；
}
标题{
宽度：100%；
边框底部：1px实心#eee；
显示器：flex；
证明内容：中心；
填充：30px 0 10px；
边缘底部：10px；
}
输入{
字体大小：13px；
边框：1px实心#eee；
边界半径：4px；
填充：8px；
}
输入：焦点{
大纲：无；
边框颜色：#ddd；
}
[type=“search”]{
-webkit外观：textfield；
}
[type=“search”]：：-webkit搜索取消按钮，
[type=“search”]：：-webkit搜索装饰{
-webkit外观：无；
}
.搜索{
显示器：flex；
对齐项目：居中；
边框底部：1px实心#eee；
垫底：10px；
}
.search输入[type=“search”]{
宽度：100%；
}
标签{
字体大小：13px；
右边距：5px；
}
.保存按钮{
宽度：30px；
高度：30px；
线高：27px；
填充：0；
利润率：0.10px；
}
h1{
保证金：0；
填充：0；
线高：1；
字体大小：22px；
填充：4px0；
}
.集装箱{
位置：相对位置；
填充：0 15px；
宽度：360px；
最大宽度：100%；
保证金：0；
}
.阅读清单{
边缘底部：15px；
}
.阅读项目{
边界半径：3px；
填充：0；
利润率：10px0；
背景色：#f7f7f7；
位置：相对位置；
溢出：隐藏；
盒影：0 1px2pxRGBA（0,0,0,0.15），0 2px3pRGBA（0,0,0,0.05）；
过渡：所有0.5秒到0秒；
}
.阅读项目.项目链接{
文字装饰：无；
显示：块；
宽度：100%；
颜色：#555；
填充：10px 50px 10px 56px；
最小高度：56px；
}
.阅读项目.项目链接：焦点，
.阅读项目.项目链接：悬停{
颜色：#66cc98；
背景色：#fff；
}
.阅读项目.项目链接范围{
显示：块；
}
.阅读项目.项目链接span.title{
字体大小：粗体；
}
.阅读项目.法维康{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：36px；
高度：36px；
边界半径：4px；
边框：1px实心#ccc；
填充：1px；
}
.阅读项目.项目链接：hover.favicon{
边框颜色：#66cc98；
}
.阅读项目.删除按钮{
位置：绝对位置；
顶部：5px；
右：5px；
边界半径：100%；
填充：0；
宽度：20px；
高度：20px；
边界：0；
背景色：透明；
颜色：#ccc；
变换：旋转（0）比例（1）；
变换：变换0.3s轻松，框影0.5s轻松；
}
.阅读项目.编辑按钮，
.阅读项目.保存按钮{
位置：绝对位置；
底部：10px；
右：10px；
填充：0；
宽度：10px；
高度：10px；
边界：0；
背景色：透明；
颜色：#ccc；
边界半径：0；
保证金：0；
}
.阅读项目.删除按钮：悬停{
背景色：#ccc；
颜色：#fff；
变换：旋转（90度）刻度（2）；
盒影：1px01pxRGBA（0,0,0,0.15）；
}

阅读清单
+
搜寻

您可以在

内放置第二个覆盖层。因此：

<a class="item-link" href="www.example.com">
  <div class="overlay"></div>
  …
</a>

---

可以使用css

box shadow

实现

.box{显示：内联块；宽度：100px；高度：100px；页边距顶部：50px；文本对齐：居中；填充顶部：2em}
.box.selected{
盒影：099999像素rgba（0,0,0,5）；
}

框1
方框2
方框3
框4

这是否适用于嵌套框？例如，您可以将3个框放在框3中，并灰显除其中一个嵌套框之外的所有内容吗？您尝试过吗？我的演示很容易增强，老实说，我从来没有在制作页面上这样做过。这只是我学会的一个技巧。在过去，我总是创建4个覆盖层，并根据元素位置和尺寸使用脚本对其进行定位。另外4个覆盖层方法谢谢您的帮助！最后，我只需要向html元素添加

position:relative

，就可以使用z-index了，我就是这么做的。这种方法对我来说很有效。这比你说的要复杂一点，但它起作用了。

<a class="item-link" href="www.example.com">
  <div class="overlay"></div>
  …
</a>

.item-link {
  position: relative
}