CSS3의 필터 속성에 대한 자세한 소개

오늘은 CSS3의 필터 속성 에 대해 자세히 설명하겠습니다. 이 필터는 매우 강력하며 웹 페이지의 images에 PS와 같은 이미지 처리 효과를 수행할 수 있습니다. CSS를 조작하여 이미지를 처리할 수 있습니다.

브라우저 지원:

IE 브라우저만 필터 속성을 지원하지 않습니다. 하위 버전의 Safari 및 Google 브라우저와 호환하려면 이제 접두사 -webkit-

filter 속성을 추가해야 합니다. 사양은 다음과 같습니다.

grayscale 회색조(값은 0-1 사이의 소수점임)

filter:grayscale(1); -webkit-filter:grayscale(1);

0은 회색조가 0%임을 의미하며, 원본 이미지에서 1은 회색조가 100% 회색임을 의미합니다.

sepia brown (값은 0-1 사이의 소수점)

filter:sepia(1); -webkit-filter:sepia(1);

0은 갈색도가 0%임을 의미하며 원본 이미지를 1로 표시합니다. 갈색 수준이 100%이면 갈색을 나타냅니다.

saturate 채도(값은 숫자)

filter:saturate(1.8); -webkit-filter:saturate(1.8);

0은 채도가 0이고 사진이 흑백으로 표시됨을 의미하고 0.5는 채도가 0임을 의미합니다. 원본 사진 Half, 1은 채도가 원본 이미지와 동일함을 의미하고, 1보다 큰 값은 채도가 향상됨을 의미합니다.

hue-rotate 색조 회전(값은 각도) angle deg

filter:hue-rotate(60deg); -webkit-filter:hue-rotate(60deg);

는 특정 색조 회전 각도를 나타냅니다.

invert 반전(값은 0~1 사이의 소수점)

filter:invert(1); -webkit-filter:invert(1);

0은 원본 이미지를 반전하지 않음을 의미하고, 1은 100%를 의미합니다. 반색.

불투명도 투명도(값은 0-1 사이의 소수점)

filter:opacity(0.5); -webkit-filter:opacity(0.5);

0은 완전 투명, 0.5는 반투명, 1은 100%를 의미합니다. 완전히 불투명합니다.

b

rightness 밝기(값은 숫자)

filter:brightness(2); -webkit-filter:brightness(2);

0은 밝기가 0이고 검은색으로 표시됨을 의미하며 0.5는 밝기가 0임을 의미합니다. 원본 이미지 Half, 1은 원본 이미지의 밝기를 의미하고, 1보다 큰 값은 밝기가 향상되었음을 의미합니다.

대비 대비(값은 숫자)

filter:contrast(1.8); -webkit-filter:contrast(1.8);

0은 대비가 0(단색)임을 의미하고, 0.5는 대비가 절반임을 의미합니다. 원본 이미지, 1은 원본 이미지의 대비이며 값이 1보다 크고 값이 클수록 대비가 강해집니다.

blur 흐림(값은 길이)

filter:blur(5px); -webkit-filter:blur(5px);

는 흐림 정도의 픽셀 값을 나타냅니다.

drop-shadow

filter:drop-shadow(0 0 10px #000); -webkit-filter:drop-shadow(0 0 10px #000);

은 CSS3 box-shadow 속성 값과 일치합니다.

trans

form 다중 속성 작성 방법과 유사하게 여러 속성 값을 공백으로 구분하여 함께 작성할 수 있습니다.

이 사례를 읽고 나면 방법을 마스터했다고 믿습니다. PHP 중국어 웹사이트 기사에서 다른 관련 주제에 주목해 주세요!

관련 읽기:

CSS를 사용하여 이미지 회전 효과를 만드는 방법

HTML에서 배경색을 표시할 수 없는 문제에 대한 해결 방법

HTML 웹 페이지를 최적화하는 방법

위 내용은 CSS3의 필터 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!