작성일/수정일
2024-09-30 11:29:10 / 2024-09-30 11:29:10
* 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);
}