[CSS] backdrop-filter 로 배경에 반투명 효과 주기

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

이런 식으로 스타일을 적용할 수 있습니다.