CSS에서 필터 속성을 사용하는 방법

CSS 필터 속성을 사용하면 흐림, 밝기 및 회색체와 같은 시각적 효과가 HTML 요소에 직접 적용될 수 있습니다. 1) 구문 필터 : 필터 기능 (값)을 사용하여 효과를 적용하십시오. 2) 여러 필터를 공간 분리 (예 : Blur) 밝기 (70%)와 결합합니다. 3) 일반적인 함수로는 Blur (), Brightness (), Contrast (), GrayScale (), Hue-Rotate (), Invert (), 불투명 (), Satobate () 및 Sepia ()가 포함됩니다. 4) 호버 효과, 어두운 모드 조정, 흐린 배경 및 장애인 상태에 필터를 적용하십시오. 5) 큰 요소에서의 과도한 사용을 피함으로써 성능을 보장하고 배경 흐리기에 대한 배경 필터를 선호합니다. 6) 필터는 비파괴 적이며 최신 브라우저에서 널리 지원되므로 독창적 인 콘텐츠를 변경하지 않고 동적의 성능의 시각적 향상에 이상적입니다.

CSS filter 속성은 요소 (일반적으로 이미지)에 시각적 효과를 적용하는 강력한 도구입니다. 대부분 이미지뿐만 아니라 비디오, 버튼 또는 기타 HTML 요소도 있습니다. 이미지 편집 소프트웨어 또는 JavaScript없이 CSS를 통해 직접 Blur, 밝기 조정, 회색 스케일 등과 같은 효과를 사용하여 컨텐츠 렌더링을 수정할 수 있습니다.

효과적으로 사용하는 방법은 다음과 같습니다.

기본 구문

filter 속성은 하나 이상의 필터 기능을 값으로 사용합니다. 일반적인 구문은 다음과 같습니다.

 요소 {
  필터 : 필터 기능 (값);
}

여러 필터를 공간으로 분리하여 여러 필터를 적용 할 수 있습니다.

 img {
  필터 : 블러 (2px) 밝기 (70%) 대비 (120%);
}

일반적인 필터 기능

각 필터 기능은 특정 시각적 측면을 조정합니다. 가장 널리 사용되는 것들은 다음과 같습니다.

• blur(px)
  가우스 블러를 적용합니다. 픽셀 값이 높을수록 요소가 흐려집니다.
  예 : filter: blur(3px); - 배경 흐림 효과에 적합합니다.

• brightness(%)
  밝기를 조정합니다. 100% 변화가 없음을 의미합니다. 100% 이상이 더 밝아지면 어두워집니다.
  예 : filter: brightness(50%); - 호버 디밍에 유용합니다.

• contrast(%)
  대비를 조정합니다. 100% 변경되지 않았습니다. 낮은 값은 대비를 줄이고 높이 증가합니다.
  예 : filter: contrast(150%);

• grayscale(%)
  요소를 그레이 스케일로 변환합니다. 100% 는 완전히 회색이며 0% 풀 컬러입니다.
  예 : filter: grayscale(100%); - 종종 비활성 상태의 이미지에 사용됩니다.

• hue-rotate(deg)
  컬러 휠을 회전시킵니다. 학위 값을 허용합니다 (0DEG ~ 360DEG).
  예 : filter: hue-rotate(90deg); - 스펙트럼에서 색상을 변화시킵니다.

• invert(%)
  색상을 반전합니다. 100% 완전히 반전 된 것을 의미합니다.
  예 : filter: invert(100%); - 다크 모드 토글에 사용됩니다.

• opacity(%)
  투명성을 설정합니다. opacity CSS 속성과 유사하지만 필터 체인 내에서 작동합니다.
  예 : filter: opacity(50%);

• saturate(%)
  색상 채도를 조정합니다. 100% 는 정상이며 값이 높을수록 색상이 강화됩니다.
  예 : filter: saturate(200%);

• sepia(%)
  세피아 톤을 적용합니다. 100% 빈티지 사진 효과를 제공합니다.
  예 : filter: sepia(80%);

실제 사용 사례

• 이미지 호버 효과
  호버에 이미지를 더 매력적으로 만듭니다.

   IMG : 호버 {
    필터 : 밝기 (120%) 포화 (150%);
    전환 : 필터 0.3s 편의;
  }

• 다크 모드 조정
  임베디드 컨텐츠의 대비를 반전 시키거나 조정하십시오.

   .dark-Mode iframe {
    필터 : 반전 (1) Hue-Rotate (180deg);
  }

• 흐릿한 배경 (배경 효과)
  backdrop-filter 투명한 오버레이에 더 좋지만 filter: blur() 요소 자체에서 작동합니다.

   .Blurred-box {
    필터 : 블러 (4px);
  }

• 장애인 상태
  시각적으로 강조되지 않는 요소 :

   .Disabled-Button {
    필터 : 그레이 스케일 (100%) 불투명 (60%);
  }

  ---

  성능 및 브라우저 지원

  • 필터는 일반적으로 하드웨어로 셀러링되므로 잘 작동합니다.
  • 큰 요소에 지연이있는 경우 will-change 또는 transform: translateZ(0) 신중하게 사용하십시오.
  • 대부분의 최신 브라우저는 filter 지원하지만 이전 버전의 Internet Explorer는 그렇지 않습니다.
  • 배경 효과 (요소 뒤에있는 것을 흐리게 함)의 경우 대신 backdrop-filter 사용하십시오.

  ---

  최종 노트

  filter 속성은 비파괴 적입니다. 원본 이미지 또는 컨텐츠는 변경되지 않습니다. 미묘한 향상 또는 동적 UI 피드백에 이상적입니다. 하위 엔드 장치의 성능에 영향을 줄 수 있으므로 큰 요소의 큰 흐림과 같은 무거운 필터를 과도하게 사용하지 마십시오.

  기본적으로 비주얼을 빠르고 깨끗하게 조정하려면 filter CSS 기능입니다.

  위 내용은 CSS에서 필터 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!