CSS3에서 지원하는 필터는 무엇입니까?

css3에서 지원하는 필터는 다음을 포함하여 필터 속성으로 정의된 시각 효과입니다. 1. 이미지에 가우시안 블러를 설정할 수 있습니다. 2. 밝기 필터 3. 프로젝션 필터; 필터, 6. 색조 회전 필터, 7. 반전 이미지 필터, 9. 채도 필터,

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3에서 지원하는 필터는 필터 속성으로 정의된 시각 효과입니다.

필터 속성으로 설정할 수 있는 기능(시각적 효과)

1. 블러 필터(px)

이미지에 가우시안 블러를 설정합니다. 값이 클수록 더 흐려집니다. 기본값은 0이며, 이는 흐릿함이 없음을 의미합니다.

filter:blur(4px);

2. 밝기 필터(%)

이미지에 선형 곱셈을 적용하여 더 밝거나 어둡게 만듭니다. 값이 0%이면 이미지가 완전히 검은색이 됩니다. 값이 100%이면 이미지에 변화가 없습니다. 다른 값은 선형 승수 효과에 해당합니다. 100% 이상의 값이면 괜찮고 이미지가 이전보다 밝아집니다. 값이 설정되지 않은 경우 기본값은 1입니다.

 filter: brightness(200%);

3. 대비 필터(%)

이미지의 대비를 조정합니다. 값이 0%이면 이미지가 완전히 검은색이 됩니다. 값은 100%이고 이미지는 변경되지 않습니다. 값은 100%를 초과할 수 있으며, 이는 더 낮은 비교가 사용된다는 의미입니다. 값이 설정되지 않은 경우 기본값은 1입니다.

 filter: contrast(200%);

4. 투영 필터(x 오프셋 y 오프셋 흐림 범위 색상)

는 상자 그림자 속성과 매우 유사합니다. 차이점은 필터를 통해 일부 브라우저는 더 나은 성능을 위해 하드웨어 가속을 제공한다는 것입니다.

 filter: drop-shadow(8px 8px 10px red);

5. 그레이스케일 필터(%)

이미지를 그레이스케일로 변환합니다. 값은 변환 규모를 정의합니다. 값이 100%이면 이미지가 완전히 흑백으로 변환되고, 값이 0%이면 이미지가 변하지 않습니다. 설정하지 않으면 기본값은 0입니다. 0-1 사이의 소수를 쓸 수도 있습니다.

 filter:grayscale(0.5);

6. 색조 회전 필터(deg)

이미지에 색조 회전을 적용합니다. 색상 원에 따라 이미지의 색상이 회전하도록 합니다. 값이 0deg이면 이미지에 변화가 없습니다. 값을 설정하지 않은 경우 기본값은 0deg입니다. 이 값에는 최대값이 없지만 360deg를 초과하는 값은 다시 도는 것과 같습니다.

 filter: hue-rotate(90deg);

7. 이미지 필터 반전(%)

입력 이미지를 반전시킵니다. 값은 변환 규모를 정의합니다. 값의 100%는 완전한 반전입니다. 0% 값은 이미지에 변화가 없음을 의미합니다. 0%에서 100% 사이의 값은 효과의 선형 승수입니다. 값이 설정되지 않은 경우 기본값은 0입니다.

 filter: invert(100%);

8. 투명도 필터(%)

이미지의 투명도입니다. 0% 값은 완전한 투명도를 의미하고, 100% 값은 이미지에 변화가 없음을 의미합니다. 0-100% 사이에서는 부분적으로 투명합니다. % 대신 0과 1 사이의 소수를 사용할 수도 있습니다.
기존 불투명도 속성과 매우 유사하지만 차이점은 필터를 통해 일부 브라우저는 성능 향상을 위해 하드웨어 가속을 제공한다는 것입니다.

 filter: opacity(30%);

9. 채도 필터(%)

값이 0%이면 완전히 불포화 상태이고, 값이 100%이면 이미지에 변화가 없다는 의미입니다. 100%보다 크면 채도가 높아져 색이 진해집니다.

 filter: saturate(800%);

10. 세피아 필터(%)

이미지를 세피아로 변환합니다. 100% 값은 완전한 세피아이고, 0% 값은 이미지를 변경하지 않습니다. 0%에서 100% 사이의 값은 효과의 선형 승수입니다. 설정하지 않으면 기본값은 0입니다.

 filter: sepia(100%);

사용 코드:

&:hover {
          -webkit-filter: opacity(0.5%);
          -o-filter: opacity(0.5);
          -moz-filter: opacity(0.5);
          -ms-filter: opacity(0.5);
          filter: opacity(0.5);
        }

(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드)

위 내용은 CSS3에서 지원하는 필터는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!