필터
backdrop-filter: opacity()
엘리먼트에 배경 불투명도 필터를 적용하는 유틸리티입니다.
| Class | Styles |
|---|---|
backdrop-opacity-<number> | backdrop-filter: opacity(<number>%); |
backdrop-opacity-(<custom-property>) | backdrop-filter: opacity(var(<custom-property>)); |
backdrop-opacity-[<value>] | backdrop-filter: opacity(<value>); |
예제
기본 예제
backdrop-opacity-50과 backdrop-opacity-75 같은 유틸리티를 사용해 엘리먼트에 적용된 모든 백드롭 필터의 불투명도를 조절할 수 있습니다:
backdrop-opacity-10
backdrop-opacity-60
backdrop-opacity-95
<div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert backdrop-opacity-10 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert backdrop-opacity-60 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-invert backdrop-opacity-95 ..."></div></div>커스텀 값 사용하기
backdrop-opacity-[<value>] 구문을 사용하세요 backdrop filter opacity를 완전히 커스텀한 값으로 설정하려면:
<div class="backdrop-opacity-[.15] ..."> <!-- ... --></div>CSS 변수를 사용하려면 backdrop-opacity-(<custom-property>) 구문을 사용할 수도 있습니다:
<div class="backdrop-opacity-(--my-backdrop-filter-opacity) ..."> <!-- ... --></div>이는 backdrop-opacity-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a backdrop-filter: opacity() 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="backdrop-opacity-100 md:backdrop-opacity-60 ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
