프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

DEV

[ css] backdrop-filter

2024.09.30
북마크 [출처 이동]    작성자 정보
* filter
- filter는 하위요소 전체에 블러 처리를 할 수 있다.
- filter 사용시 하위요소까지 효과가 적용됨 별개의 형제요소를 만들어 백그라운드 주고 효과를 적용
- filter 사용시 하얀테두리가 생겨서 backdrop-filter를 사용하니 해결 
<style>
 body { filter: buler(5px); }
</style>


* backdrop-filter
- 특정요소에 블러 처리를 할 수 있으며, 가상요소 Before 혹은 after 생성 후 사용가능함
- 가상요소를 생성 후 background-filter 사용
body::before {
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 backdrop-filter: blur(10px);


}
 



 

이 포스트 공유하기

답글쓰기 전체목록