[CSS] 배경 필터 backdrop-filter

 

backdrop-filter는 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성이다.

요소 뒤에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 반투명하게 설정해야 한다.

 

 

 

 

 

 

can i use 되는거 반 안되는 거 반..

 

 

 

 

 

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

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

.contrast {
  -webkit-backdrop-filter: contrast(.8);
  backdrop-filter: contrast(.8);
}

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

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

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

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

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

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

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

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

 

 

 

---

 

 

 

아래는 css 적용 예이다.

 

https://codepen.io/goldknow/pen/PojxRdj

backdrop-filter v2

 

 

 

 

---

참고 : 

 

https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter

https://css-tricks.com/almanac/properties/b/backdrop-filter/