>  기사  >  웹 프론트엔드  >  CSS3 필터의 다양한 특수 효과

CSS3 필터의 다양한 특수 효과

高洛峰
高洛峰원래의
2016-10-09 14:03:231418검색

css3의 다양한 필터 특수 효과

css3의 필터 속성은 간단하고 사용하기 쉽고 강력하다고 할 수 있습니다. 이러한 효과는 이미지에 적용되어 특수 효과를 얻을 수도 있습니다. 비디오로, 여기서는 그림 효과에 대해 논의합니다.)

브라우저 호환성

현재 주요 브라우저와 CSS3의 호환성은 매우 좋습니다. IE9 이하의 이전 버전에서는 아직 지원하지 않습니다. 요점은 Microsoft가 이러한 오래된 골동품을 포기할 준비가 되어 있다는 것입니다. 또한 IE 필터도 사용할 수 있으며 이에 대해서는 별도로 설명합니다.

현재 사양에서 지원되는 효과는 다음과 같습니다.

회색조 값은 0-1 사이의 십진수입니다.

세피아 값은 0-1 사이의 십진수입니다.

saturate 채도 값은 num

hue-rotate 색상 회전 값은 angle

invert 값은 0~1 사이의 소수입니다.

opacity 투명도 값은 0-1 사이의 십진수

밝기 값은 0-1 사이의 십진수

대비 대비 값은 num

blur 값은 길이

drop-shadow Shadow

사용법은 다음과 같은 표준 CSS 작성 방법입니다.

-webkit-filter: Blur(2px);

테스트 브라우저는 다음과 같습니다. 크롬 브라우저 버전 44.0 기준, 샘플 이미지 상단이 원본 이미지, 하단이 FIFTER 효과를 추가한 이미지입니다.

grayscale

이 효과 매개변수에 값이 없으면 0~1 사이의 값이 다른 greyscale로 렌더링됩니다. 다음 예는 100% 렌더링입니다. -webkit-filter:grayscale(1); 향수 기능의 효과, 값도 0-1, -webkit-filter:sepia(1);

CSS3 필터의 다양한 특수 효과

채도

이 속성은 이미지의 채도를 변경합니다. 값 범위는 숫자일 수 있습니다. 예는 800%입니다. (6);

CSS3 필터의 다양한 특수 효과

hue-rotate 색조 회전

hue-rotate는 이미지의 색조를 변경하는 데 사용됩니다. 기본값은 0deg입니다. 값은 각도입니다. 예: -webkit-filter:hue-rotate(180deg)

CSS3 필터의 다양한 특수 효과

반전 색상

반전 효과는 이와 다소 유사합니다. 예: -webkit-filter:invert(1)

CSS3 필터의 다양한 특수 효과

불투명도

이 속성은 자주 사용됩니다. 예: -webkit- 필터:불투명도(0.3)

CSS3 필터의 다양한 특수 효과

밝기 밝기

변경 이미지의 밝기, 기본값은 100%입니다. 예: -webkit-filter: 밝기(0.5)

CSS3 필터의 다양한 특수 효과

대비 대비

이 속성 값 및 채도 채도와 유사하며 예: 500%: -webkit-filter:contrast(5)

CSS3 필터의 다양한 특수 효과

blur

이 속성은 이미지의 선명도를 변경합니다. 기본값은 0입니다. 예: -webkit-filter:blur(1px)

CSS3 필터의 다양한 특수 효과

drop-shadow Shadow

이는 box-shadow와 유사하며 그림에 그림자를 추가합니다. 예: -webkit-filter:drop-shadow(10px 10px 10px #000)

CSS3 필터의 다양한 특수 효과

물론 여러 속성을 추가하는 것도 가능합니다. 예: -webkit-filter:saturate(10)hue-rotate(500deg) greyscale(0.3) sepia(0.7) contrast(2.5) invert(0.2) 밝기(1.2 );

1CSS3 필터의 다양한 특수 효과

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:수직 수평 중앙다음 기사:수직 수평 중앙