CSS3의 필터 속성 사용에 대한 자세한 그래픽 설명(예제 코드)

최근 인터넷에서 특히 멋진 속성을 발견했는데, 바로CSS3의 필터 속성입니다. 이 속성은 하나의 이미지가 여러 가지 효과를 나타낼 수 있습니다.에서 필터를 사용하려면 필터 효과를 보여주는 예와 관심 있는 친구들이 아래에서 계속 읽어보세요.

CSS 필터의 의미를 모릅니다. 일반인의 용어로 필터는 필터를 나타냅니다. 공식적으로 정의된 필터 속성은 요소(보통)의 시각적 효과(예: 흐림 및 채도)를 설정할 수 있습니다.

사용법: 설정해야 하는 이미지에 필터 속성을 직접 추가하면 됩니다.속성에 여러 가지 선택값이 있다는 것을 알 수 있습니다. 그 의미를 간략하게 소개하겠습니다

1. 회색조

2. 세피아 브라운(복고풍의 사진 느낌)

4, 색조 회전

5, 반전

6, 불투명도

7, 밝기

8, 대비

9, 흐림

10, 그림자

필터 속성을 사용하여 이미지를 회색조 이미지이며 값은 변환 비율입니다. 값이 100%이면 완전히 회색조 이미지로 변환됩니다. 값이 0%이면 이미지에 변화가 없습니다. 값이 0%에서 100% 사이이면 완전 회색조와 원본 사이입니다. 영상. 이 예시에서는 greyscale을 50%로 설정했습니다

img { -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */ filter: grayscale(50%); }

전자가 원본 이미지이고, 후자가 로 설정되었습니다. 50% 회색 렌더링 효과.

필터 속성을 사용하여 이미지를 가우시안 흐림으로 설정합니다. "반경" 값은 가우시안 함수의 표준 편차 또는 화면에서 함께 혼합되는 픽셀 수를 설정합니다. 값이 설정되지 않은 경우 기본값은 0입니다. 이 매개변수는 CSS 길이 값을 설정할 수 있지만 백분율 값은 허용되지 않습니다.

img { -webkit-filter: blur(1.5px); /* Chrome, Safari, Opera */ filter: blur(1.5px); }