html - 在容器上设置模糊效果，但不是其中的特定元素

Question

我如何申请 filter: blur(20px)到类 todo 的 div ，但不是类 modal 的 div ?
是否有可能，也许在 SCSS 的帮助下？
代码:

.todo {
  display: grid;
}

.modal {
  display: grid;
  position: fixed;
  width: 500px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
}

<div class='todo'>
  <div class='todo__sidebar'>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>

    <div class='modal'>
      <span>12345</span>
    </div>
  </div>
</div>

Codepen

Answer 1

您可以将模态包装在容器中并使用 backdrop-filter :

.todo {
  position: relative;
  display: grid;
}

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  backdrop-filter: blur(5px);
  height: 100vh;
  width: 100%;
}

.modal {
  display: grid;
  width: 500px;
  height: 200px;
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
}

<div class='todo'>
  <div class='todo__sidebar'>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>

    <div class="modal-container">
      <div class='modal'>
        <span>12345</span>
      </div>
    </div>
  </div>
</div>

虽然，支持是not great .

另一种选择是使用 JS:

document.querySelector('ul').style.filter = 'blur(5px)';

.todo {
  display: grid;
}

.modal {
  display: grid;
  position: fixed;
  width: 500px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
}

<div class='todo'>
  <div class='todo__sidebar'>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
    <div class='modal'>
      <span>12345</span>
    </div>
  </div>
</div>

或者，您可以在 HTML 中交换它们并使用兄弟选择器( ~ ):

.todo {
  display: grid;
}

.modal {
  display: grid;
  position: fixed;
  width: 500px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

.modal ~ ul {
  filter: blur(5px);
}

<div class='todo'>
  <div class='todo__sidebar'>
    <div class='modal'>
      <span>12345</span>
    </div>

    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
  </div>
</div>

这些都不是理想的，但如果您需要它们只是一些选择。