<section class="section">
  <div class="blur">backdrop-filter: blur(4px)</div>
  <div class="invert">backdrop-filter: invert(100%)</div>
  <div class="grayscale">backdrop-filter: grayscale(100%)</div>
  <div class="brightness">backdrop-filter: brightness(60%)</div>
  <div class="contrast">backdrop-filter: contrast(40%)</div>
  <div class="drop-shadow">
    backdrop-filter: drop-shadow(4px 4px 10px blue)
  </div>
  <div class="hue-rotate">backdrop-filter: hue-rotate(120deg)</div>
  <div class="opacity">backdrop-filter: opacity(20%)</div>
  <div class="sepia">backdrop-filter: sepia(90%)</div>
  <div class="saturate">backdrop-filter: saturate(80%)</div>
</section>
<section class="wrapper">
  <picture>
    <img src="https://nus3.github.io/p-new-features/pages/backdrop-filter/nus3-blog-logo.png" />
  </picture>
  <div class="blur absolute">not use background-image</div>
</section>

.section {
  margin: 0 auto;
  background-image: url(https://nus3.github.io/p-new-features/pages/backdrop-filter/nus3-blog-logo.png);
  background-size: contain;
  width: 500px;
  height: 1000px;
  padding: 1em;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2em;
  color: white;
  font-weight: bold;
}

.section > div {
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.5em;
  width: 80%;
}

.blur {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.invert {
  -webkit-backdrop-filter: invert(100%);
  backdrop-filter: invert(100%);
}

.grayscale {
  -webkit-backdrop-filter: grayscale(100%);
  backdrop-filter: grayscale(100%);
}

.brightness {
  -webkit-backdrop-filter: brightness(60%);
  backdrop-filter: brightness(60%);
}

.contrast {
  -webkit-backdrop-filter: contrast(60%);
  backdrop-filter: contrast(40%)
}

.drop-shadow {
  -webkit-backdrop-filter: drop-shadow(4px 4px 10px blue);
  backdrop-filter: drop-shadow(4px 4px 10px blue)
}

.hue-rotate {
  -webkit-backdrop-filter: hue-rotate(120deg);
  backdrop-filter: hue-rotate(120deg);
}

.opacity {
  -webkit-backdrop-filter: opacity(20%);
  backdrop-filter: opacity(20%);
}

.sepia {
  -webkit-backdrop-filter: sepia(90%);
  backdrop-filter: sepia(90%);
}

.saturate {
  -webkit-backdrop-filter: saturate(80%);
  backdrop-filter: saturate(80%);
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: white;
  font-weight: bold;
}

.absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.5em;
}