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

Question

pad我想知道除了我尝试过的一个 idbody: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>

标签： htmlcss

Answer 1

用这种方式

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

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