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

Question

如何在页面上制作灰色叠加层，但该页面中的一个元素没有变灰？

有很多这样的问题，但没有一个有效:

Hide all elements except one div for print view - 这个不适用于我的情况，因为我不想隐藏所有内容。

Disable everything except a DIV element - 这第二个答案似乎与我的相似。但是，即使我更改了我想要的非灰色元素的 z-index，整个页面仍然是灰色的。另外，我发现使用 div 之间没有区别和 iframe .

Want to make the whole page in grayscale except specified div - 这个只是让其他所有东西都变成灰度，但我不想要那样。

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

.overlay {
  z-index: -1;
}

至

.overlay {
  z-index: 0;
}

除了 <input class="edit-title" value="Site Title"> 之外，有没有办法让所有内容变灰？ ?

html {
  box-sizing: border-box;
}

.overlay {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  background: rgba(0, 0, 0, .4);
  z-index: -1;
}

edit-title {
  z-index: 100;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
input,
optgroup,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

body {
  font-size: 13px;
  line-height: 1.4;
  color: #555;
  margin: 0;
  padding: 0;
  background: white;
  overflow-x: hidden;
}

.button {
  font-weight: bold;
  color: #fff;
  border: 1px solid #44aa76;
  border-width: 0 0 3px 0;
  background-color: #66cc98;
  padding: 5px;
  border-radius: 6px;
  text-align: center;
}

.button:focus,
.button:hover,
.active {
  cursor: pointer;
  background-color: #44aa76;
  color: #fff;
  outline: none;
}

header {
  width: 100%;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: center;
  padding: 30px 0 10px;
  margin-bottom: 10px;
}

input {
  font-size: 13px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px;
}

input:focus {
  outline: none;
  border-color: #ddd;
}

[type="search"] {
  -webkit-appearance: textfield;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

.search {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.search input[type="search"] {
  width: 100%;
}

label {
  font-size: 13px;
  margin-right: 5px;
}

.save-button {
  width: 30px;
  height: 30px;
  line-height: 27px;
  padding: 0;
  margin: 0 10px;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 22px;
  padding: 4px 0;
}

.container {
  position: relative;
  padding: 0 15px;
  width: 360px;
  max-width: 100%;
  margin: 0;
}

.reading-list {
  margin-bottom: 15px;
}

.reading-item {
  border-radius: 3px;
  padding: 0;
  margin: 10px 0 0 0;
  background-color: #f7f7f7;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.5s ease 0s;
}

.reading-item .item-link {
  text-decoration: none;
  display: block;
  width: 100%;
  color: #555;
  padding: 10px 50px 10px 56px;
  min-height: 56px;
}

.reading-item .item-link:focus,
.reading-item .item-link:hover {
  color: #66cc98;
  background-color: #fff;
}

.reading-item .item-link span {
  display: block;
}

.reading-item .item-link span.title {
  font-weight: bold;
}

.reading-item .favicon {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 1px;
}

.reading-item .item-link:hover .favicon {
  border-color: #66cc98;
}

.reading-item .delete-button {
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 100%;
  padding: 0;
  width: 20px;
  height: 20px;
  border: 0;
  background-color: transparent;
  color: #ccc;
  transform: rotateZ(0) scale(1);
  transition: transform 0.3s ease, box-shadow 0.5s ease;
}

.reading-item .edit-button,
.reading-item .save-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 0;
  width: 10px;
  height: 10px;
  border: 0;
  background-color: transparent;
  color: #ccc;
  border-radius: 0;
  margin: 0;
}

.reading-item .delete-button:hover {
  background-color: #ccc;
  color: #fff;
  transform: rotateZ(90deg) scale(2);
  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
}

<body class="popup-page">
  <div class="container">
    <header>
      <h1 data-localize="appName">Reading List</h1>
      <button class="button save-button" id="savepage">+</button>
    </header>
    <div class="search">
      <label for="my-search" data-localize="search">Search</label>
      <input type="search" id="my-search" name="search" autocomplete="off">
    </div>

    <div class="reading-list" id="reading-list">
      <div class="reading-item read">
        <a value="www.example.com" class="button delete-button">×</a>
        <a class="item-link" href="www.example.com" alt="Reading List">
          <input class="edit-title" value="Site Title">
          <span class="host">example.com</span>
        </a>
        <img src="/icons/save.svg" class="button save-button"></div>
    </div>

  </div>
  <div class="overlay" id="overlay"></div>
</body>

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>