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

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

많은 사람들이

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

필터 속성 구문: 필터: 없음 | 흐림() | 대비() | 회색조() | 채도() | sepia() | url();

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

1. 회색조

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

4, 색조 회전

5, 반전

6, 불투명도

7, 밝기

8, 대비

9, 흐림

10, 그림자

예 1:

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

HTML 코드:

<img  src="/static/imghwm/default1.png"  data-src="img/草莓.jpg"  class="lazy"      style="max-width:90%" height="192px"/ alt="CSS3의 필터 속성 사용에 대한 자세한 그래픽 설명(예제 코드)" >

CSS 코드:

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

렌더링:

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

예 2:

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

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

Rendering:

이 예에서는 그림과 같이 이미지에 가우시안 흐림 효과를 주기 위해 흐림을 1.5px로 설정합니다.

요약: 위 내용은 CSS3에서 이미지 필터 속성 필터를 사용하는 방법을 소개합니다. 여기에는 두 가지 데모만 나와 있습니다. 다른 속성에 대해서는 직접 시도해 볼 수 있습니다. 예상치 못한 효과가 있을 수도 있습니다.

위 내용은 CSS3의 필터 속성 사용에 대한 자세한 그래픽 설명(예제 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!