backdrop-filter

backdrop-filter (백드롭 필터 조합)

요소의 뒤쪽(backdrop)에 필터를 적용하는 유틸리티들의 조합에 대한 문서예요. blur, brightness 등 다양한 백드롭 필터를 조합하거나 해제하는 방법을 알려 드릴게요.

출처: 문서

본문

ClassStyles

클래스	스타일
`backdrop-filter-none`	`backdrop-filter: none;`
`backdrop-filter-(<custom-property>)`	`backdrop-filter: var(<custom-property>);`
`backdrop-filter-[<value>]`	`backdrop-filter: <value>;`

Examples

Basic example

backdrop-blur-xs나 backdrop-grayscale 같은 유틸리티를 사용하면 요소의 뒤쪽(백드롭)에 필터를 적용할 수 있어요.

<div class="bg-[url(/img/mountains.jpg)] ...">
  <div class="backdrop-blur-xs ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)] ...">
  <div class="backdrop-grayscale ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)] ...">
  <div class="backdrop-blur-xs backdrop-grayscale ..."></div>
</div>

다음과 같은 백드롭 필터 유틸리티들을 조합할 수 있어요: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia.

Removing filters

요소에 적용된 모든 백드롭 필터를 제거하고 싶다면 backdrop-filter-none 유틸리티를 사용해요.

<div class="backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none"></div>

Using a custom value

완전히 커스텀한 값으로 백드롭 필터를 지정하고 싶다면 backdrop-filter-[<value>] 문법을 사용해요.

<div class="backdrop-filter-[url('filters.svg#filter-id')] ...">
  <!-- ... -->
</div>

CSS 변수로 지정하고 싶다면 backdrop-filter-(<custom-property>) 문법도 사용할 수 있어요.

<div class="backdrop-filter-(--my-backdrop-filter) ...">
  <!-- ... -->
</div>

이것은 backdrop-filter-[var(<custom-property>)]의 단축 표기로, var() 함수를 자동으로 넣어 주는 문법이에요.

Applying on hover

backdrop-filter 유틸리티 앞에 hover:* 같은 변형을 붙이면 해당 상태에서만 유틸리티를 적용할 수 있어요.

<div class="backdrop-blur-sm hover:backdrop-filter-none ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.

Responsive design

backdrop-filter 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<div class="backdrop-blur-sm md:backdrop-filter-none ...">
  <!-- ... -->
</div>