CSS 필터 효과 : CSS의 블러, 그레이 스케일, 밝기 등!

CSS 필터 : 이미지 조작에 대한 포괄적 인 안내서

CSS 필터 효과의 예. SVG 사양의 일부인 CSS 필터는 이미지 렌더링을 조작하는 강력하고 사용자 친화적 인 방법을 제공합니다. 이 필터는 이제 CSS에 통합되어 흐릿한, 밝게, 채도 조정 등을 허용합니다. 다양한 시각 효과를 제공하여 개별적으로 또는 조합하여 사용할 수 있습니다. 기본 구문은 간단합니다

주요 필터를 탐색합시다 : 주요 개념 :

CSS 필터는 디스플레이 전에 요소 렌더링을 수정하여 효율적인 이미지 조작을 제공합니다. 그들은 광범위한 브라우저 지원을 자랑하고 다양한 효과를 촉진합니다 (흐림, 밝기, 대비, 대비, 그레이 스케일, 색조, 반전, 불투명도, 포화, 세 피아). 필터는 동적 비주얼을 위해 결합하여 애니메이션 할 수 있습니다. 응용 프로그램 주문은 최종 결과에 영향을 미치며 일부 필터는 다른 필터를 재정의합니다. 이미지, 비디오 및 iframes를 포함한 다양한 요소에 적용됩니다. 일반적으로 성능을 발휘하는 반면 필터는 하드웨어 가속없이 느릴 수 있습니다. 필터 성능은 적용된 SVG 필터에 따라 다릅니다. 주요 브라우저는

속성을 ​​지원하지만 인터넷 익스플로러는 예외입니다.

개별 필터 기능 :

filter: <filter-function> [<filter-function>]* | none;

밝기 :

이미지 밝기를 제어합니다. 값 ≥ 0을 허용합니다. 0%는 검은 색이고 100%는 원래이며 값 & gt; 100% 밝기를 증가시킵니다.

대비 :

이미지 대비 조정. 값 ≥ 0; 0%는 그레이 스케일 이미지, 100%는 원래이며, 높은 값은 대비를 증가시킵니다.

• 회색체 : 이미지를 그레이 스케일로 변환합니다. 값의 범위는 0% (효과 없음) ~ 100% (완전 회색체)입니다.
포화 :
• 색상 포화를 제어합니다. 0%는 모든 색상을 제거하고, 100%는 원본이며 값 & gt; 100% 과포화. blur url() filter 세피아 :
는 세피아 톤을 적용합니다. 0%는 원래이며 100%는 완전히 세피아입니다.

Hue-Rotate :

이미지 색조를 회전시킵니다. 0DEG는 변하지 않았다. 값 & gt; 360deg 랩.

• 반전 : 이미지 색상을 반전시킵니다. 0%는 효과가 없으며 100% 완전히 반전됩니다. filter: brightness(300%);

블러 :
• 는 가우시안 블러를 적용합니다. 반경 (픽셀)은 블러 강도를 결정합니다.

• 불투명도 : 투명성을 제어합니다. 0%는 완전히 투명하며 100%는 불투명합니다. filter: opacity(75%);

Drop-Shadow :
• 드롭 그림자를 추가합니다. x 및 y 오프셋, 색상 및 선택적으로 블러 반경이 필요합니다.

  url () : filter: drop-shadow(5px 5px 10px #666); 사용자 정의 SVG 필터를 사용할 수 있습니다. SVG 필터의 ID를 참조하십시오. 성능은 SVG 필터에 따라 다릅니다

• 결합 및 애니메이션 필터 : 여러 필터를 결합 할 수 있습니다. 일부 필터가 다른 필터를 무시할 때 주문 문제. 애니메이션은 CSS 전환 또는 애니메이션을 사용하여 동적 효과를 만듭니다

  추가 참고 사항 : 필터는 요소의 모든 부분 (배경, 경계, 텍스트)에 영향을 미칩니다. 비디오와 iframes에 적용 할 수 있습니다. (하드웨어 가속 없음) 및

  (SVG 필터에 따라)를 제외하고 성능은 일반적으로 좋습니다. 인터넷 익스플로러를 제외하고 브라우저 지원은 우수합니다
자주 묻는 질문 :

이 섹션에는 명확성과 간결함을 위해 리프로즈 한 원본 텍스트에 제공된 FAQ에 대한 답변이 포함됩니다. 우주 제약으로 인해 여기에서 생략하지만 최종적이고 세련된 기사에 귀중한 추가 사항이 될 것입니다.

위 내용은 CSS 필터 효과 : CSS의 블러, 그레이 스케일, 밝기 등!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!