Question

我想知道如何模糊除ID为pad且尝试过body:not(#pad)但#pad的元素之外的所有内容

#foto img {
  width: 300px;
  height: 500px;
  position: relative;
  box-shadow: 1px 3px 3px 1px rgba(63, 63, 63, 0.322);
}

#pad {
  position: absolute;
  z-index: 50000000000;
  transform: scale(1.8) translate(30%, 30%);
  ;
  bottom: 50%;
}
body:not(#pad) {
  filter: blur(3px);
}

<div id="foto">
  <img src="https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
  <img src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&w=1000&q=80">
  <img id="pad" src="https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
</div>

Answer 1

使用这种方式

img:not(#pad){
   filter: blur(3px);
}

https://jsfiddle.net/lalji1051/2qfncehy/3/

Answer 2

您可以通过在照片中添加通用类来解决此问题。然后您可以选择使用#pad来忽略:not

#foto img {
  width: 300px;
  height: 500px;
  position: relative;
  box-shadow: 1px 3px 3px 1px rgba(63, 63, 63, 0.322);
}

#pad {
  position: absolute;
  z-index: 50000000000;
  transform: scale(1.8) translate(30%, 30%);
  bottom: 50%;
}

.photos:not(#pad){ filter: blur(3px) }

<div id="foto">
  <img class="photos" src="https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
  <img class="photos" src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&w=1000&q=80">
  <img class="photos" id="pad" src="https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
</div>

如何模糊除一个元素外的所有内容

2 个答案: