-
[CSS] backdrop-filter 로 배경에 반투명 효과 주기HTML & CSS 2023. 3. 20. 15:17
css에서 backdrop-filter를 사용하면 요소 뒤에 있는 영역에
시각적 필터를 적용할 수 있습니다.
| 사용
1. 사용법
backdrop-filter에 blur() 함수를 사용하면
요소 뒤의 배경에 반투명한 배경을 적용해 줍니다.
.blur { backdrop-filter:blur(10px); }
이런 식으로 사용하면 되고
값에 % 나 px 등을 사용하여 투명 강도를 설정해 줄 수 있습니다.
2. 스타일 적용
<div class="back-ground"> <div class="blur">blur</div> </div>
.back-ground { background-image: url("https://picsum.photos/300/300"); width: 300px; height: 300px; display:flex; justify-content: center; align-items: center; } .blur { height:200px; width: 200px; backdrop-filter:blur(10px); text-align: center; display: flex; justify-content:center; align-items: center; }
blur이런 식으로 스타일을 적용할 수 있습니다.
'HTML & CSS' 카테고리의 다른 글
[tailwind] tailwind-merge를 사용하여 class 충돌 피하기 (0) 2024.05.13 웹사이트의 접근성을 생각하자 (0) 2024.04.09 [CSS] CSS에서 사용자 변수 사용하기 (0) 2023.03.17 [CSS] Pseudo-class 알아보기 (0) 2023.03.10 [CSS] em, rem 알아보기 (0) 2023.03.06