최근 인터넷에서 특히 멋진 속성을 발견했는데, 바로 CSS3의 필터 속성입니다. 이 속성은 하나의 이미지가 여러 가지 효과를 나타낼 수 있습니다. 에서 필터를 사용하려면 필터 효과를 보여주는 예와 관심 있는 친구들이 아래에서 계속 읽어보세요.
많은 사람들이CSS 필터의 의미를 모릅니다. 일반인의 용어로 필터는 필터를 나타냅니다. 공식적으로 정의된 필터 속성은 요소(보통 )의 시각적 효과(예: 흐림 및 채도)를 설정할 수 있습니다.
필터 속성 구문: 필터: 없음 | 흐림() | 대비() | 회색조() | 채도() | sepia() | url();사용법: 설정해야 하는 이미지에 필터 속성을 직접 추가하면 됩니다. 속성에 여러 가지 선택값이 있다는 것을 알 수 있습니다. 그 의미를 간략하게 소개하겠습니다
1. 회색조
2. 세피아 브라운(복고풍의 사진 느낌)
4, 색조 회전
5, 반전
6, 불투명도
7, 밝기
8, 대비
9, 흐림
10, 그림자
예 1:필터 속성을 사용하여 이미지를 회색조 이미지이며 값은 변환 비율입니다. 값이 100%이면 완전히 회색조 이미지로 변환됩니다. 값이 0%이면 이미지에 변화가 없습니다. 값이 0%에서 100% 사이이면 완전 회색조와 원본 사이입니다. 영상. 이 예시에서는 greyscale을 50%로 설정했습니다
HTML 코드:<img src="img/草莓.jpg" 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:
위 내용은 CSS3의 필터 속성 사용에 대한 자세한 그래픽 설명(예제 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!