[Tailwind 및 번역] FILTERS/Backdrop Brightness

이 보도에 관하여

이 문장은 FILTERS/Backdrop Brightness의 문장을 일본어로 번역한 것이다.

Backdrop Brightness

요소 유틸리티에 배경 밝기 필터를 적용합니다.
Class
Propertiesbackdrop-brightness-0 --tw-backdrop-brightness: brightness(0); backdrop-brightness-50 --tw-backdrop-brightness: brightness(.5); backdrop-brightness-75 --tw-backdrop-brightness: brightness(.75); backdrop-brightness-90 --tw-backdrop-brightness: brightness(.9); backdrop-brightness-95 --tw-backdrop-brightness: brightness(.95); backdrop-brightness-100 --tw-backdrop-brightness: brightness(1); backdrop-brightness-105 --tw-backdrop-brightness: brightness(1.05); backdrop-brightness-110 --tw-backdrop-brightness: brightness(1.1); backdrop-brightness-125 --tw-backdrop-brightness: brightness(1.25); backdrop-brightness-150 --tw-backdrop-brightness: brightness(1.5); backdrop-brightness-200 --tw-backdrop-brightness: brightness(2);

사용법

요소 배경의 밝기backdrop-filter를 유틸리티backdrop-brightness-{amount?}와 함께 제어하려면 유틸리티를 사용합니다.

<div class="backdrop-filter backdrop-brightness-125 ...">
  <!-- ... -->
</div>

스펀지 패드

특정 인터럽트에서 요소 배경의 밝기를 제어하려면 기존 회피 밝기 프로그램에 접두사{screen}:를 추가하십시오.예를 들어 md:backdrop-brightness-150를 사용하면 중간 화면 크기 이상backdrop-brightness-150에서만 유틸리티를 사용할 수 있다.

<div class="backdrop-filter backdrop-brightness-110 md:backdrop-brightness-150 ...">
  <!-- ... -->
</div>

Tailwind의 응답 디자인 기능에 대한 상세한 설명은 스펀지 패드 디자인의 문서를 보십시오.

사용자 정의

tailwind.config.js 파일theme 영역의 backdropBrightness 키를 사용하면 어떤 backdrop-brightness 실용 프로그램을 만들 수 있는지 사용자 정의할 수 있습니다.
tailwind.config.js

  module.exports = {
    theme: {
+     extend: {
+       backdropBrightness: {
+         25: '.25',
+         175: '1.75',
+       }
+     }
    }
  }

기본 테마의 사용자 정의에 관해서는 사용자 정의 주제 문서를 보십시오.

변체

기본적으로, 역방향 밝기 강하 실용 프로그램에만 응답 변체를 생성합니다.tailwind.config.js 파일variants 영역의 backdropBrightness 속성을 수정하여 하이라이트 실용 프로그램에 생성된 변체를 제어할 수 있습니다.
예를 들어 이 설정은 hover과 focus의 변체를 생성한다.
tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       backdropBrightness: ['hover', 'focus'],
      }
    }
  }

사용 안 함

프로젝트에서 드롭다운 밝기 유틸리티를 사용하지 않는 경우 구성 파일corePlugins 영역에서 속성backdropBrightness을 false으로 설정하여 유틸리티를 완전히 비활성화할 수 있습니다.
tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+     backdropBrightness: false,
    }
  }