CSS3 필터 (필터) 속성
예
흑백 사진 (100 % 회색) 모든 색상 편집 :
-webkit-필터 : 그레이 스케일 (100 % ) / * 크롬, 사파리, 오페라 * /
필터 : 계조 (100 %);
}
»시도
정의 및 사용
필터 속성은 요소를 정의 (일반적으로 <IMG>) 시각 효과 (예 : 퍼지 및 채도).
| 기본값 : | 없음 |
|---|---|
| 상속 : | 아니 |
| 애니메이션 지원 : | 예. 자세한 사항은에서 찾을 수 있습니다 CSS 애니메이션 |
| 버전 : | CSS3 |
| 자바 스크립트 구문 : | "그레이 스케일 (100 % .style.WebkitFilter = 개체)" >> 시도 |
브라우저 지원
표의 수치는 상기 방법의 버전 번호를 먼저 지원 브라우저를 나타낸다.
즉시 지정된 브라우저 -webkit- 접두어 수 후.
| 재산 | |||||
|---|---|---|---|---|---|
| 필터 | 18.0 -webkit- | 지원하지 않습니다 | 35.0 | 6.0 -webkit- | 15.0 -webkit- |
참고 : 이전 Internet Explorer 브라우저 (8.0-4.0)를 표준이 아닌 "필터"속성이 포기 된을 지원하기 위해. IE8 및 이전 버전의 브라우저는 자주 사용 불투명도 속성을.
CSS 구문
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
팁 : 스페이스가 여러 개의 필터를 분리합니다.
필터 기능
주 : (0.75 예) 물론, 소수를 나타내는 데 사용될 수있다 (예를 들면 75 %) 필터는 전형적으로 비율을 사용한다.
| 필터 | 기술 |
|---|---|
| 없음 | 기본값, 효과 없음. |
| 흐림 (픽셀) | 이미지 설정 가우시안 흐림. "반경"함께 용융 표준 가우스 함수가 좋지 않은 값 또는 화면의 화소 수를 설정하기 위해 더 큰 값이 더 흐리게 단계; 이 파라미터가 CSS 길이 값을 설정할 수 있지만 백분율 값을 허용하지 않으며,이 값이 설정되어 있지 않으면, 디폴트는 0이다. |
| 밝기 (%) | 그림에 선형 곱셈의 응용 프로그램은 밝거나 어둡게 보이게합니다. 값이 0 % 인 경우, 이미지가 모두 검은 색입니다. 값은 100 %, 이미지에 변화이다. 다른 값은 승수 효과를 선형 대응한다. 100 % 이상의 값은 이미지가 원본보다 밝게 될 것이다 가능하다. 값이 설정되지 않으면, 디폴트는 1이다. |
| 콘트라스트 (%) | 이미지의 대비를 조정합니다. 값은 이미지가 모두 검은 색이며, 0 %입니다. 값은 100 %, 변경되지 않은 이미지입니다. 값은 낮은 대비를 사용하는 것을 의미 100 %를 초과 할 수 있습니다. 값이 설정되지 않으면, 디폴트는 1이다. |
| 드롭 그림자 (H-그림자 V의 -shadow 흐림 확산 색상) | 이미지에 그림자 효과를 설정합니다. 그림자가 아래의 이미지 합성, 모호함이있을 수 있습니다, 특정 색상 다이어그램 마스크를 오프셋 버전을 그릴 수 있습니다. 기능 "삽입"키워드가 허용되지 외에합니다 (CSS3 배경에 정의) <그림자> 값 입력을 받아들입니다. 기존의 상자 그림자 상자 그림자 속성과 기능은 매우 유사하다 것을 제외하고, 필터를 통해, 성능 향상을 위해 일부 브라우저가 하드웨어 가속을 제공한다.
|
| 계조 (%) | 이미지를 그레이 스케일로 변환합니다. 이 변환 비율의 값을 정의한다. 100 %의 값은 그레이 스케일 이미지를 완전히 변하지 화상의 0 %의 값으로 변환된다. 0 %와 100 % 사이의 값, 승수 효과는 선형이다. 설정하지 않으면 기본 값은 0입니다; |
| 색상 - 회전 (°) | 화상 색조 회전 출원. "각도"컬러링 각 이미지 설정 값 조정 값이다. 값 0deg, 이미지 변경. 값이 설정되지 않으면, 디폴트 값은 0deg이다. 비록 다른 주변 360deg의 등가 값을 초과하는 어떤 최대 값은 존재하지 않는다. |
| 반전 (%) | 입력 이미지를 반전. 이 변환 비율의 값을 정의한다. 값의 100 %는 완전히 반대입니다. 0 %의 값이 변경되지 않은 이미지. 0 %와 100 % 사이의 값은 승수 효과는 선형이다. 값이 설정되지 않으면, 디폴트 값은 0이다. |
| 불투명도 (%) | 이미지의 투명도 전환도. 이 변환 비율의 값을 정의한다. 0 %는 완전히 투명하며, 100 %, 그대로 화상의 값. 0 %와 100 % 사이의 값, 효과는 시료의 수를 곱한 선형 배율도 이미지와 동등하다. 값이 설정되지 않으면, 디폴트 값은 1이다. 이 기능을 하드웨어 가속을 제공 일부 브라우저의 성능을 개선하기 위해, 필터를 통한 것을 제외하고는 기존의 불투명 특성과 매우 유사하다. |
| 포화 (%) | 이미지의 채도를 변환합니다. 이 변환 비율의 값을 정의한다. 0 %는 완전 불포화, 화상의 변화가 100 % 이하이다. 다른 값은 승수 효과는 선형이다. 값의 100 %가 허용보다 더, 더 높은 채도있다. 값이 설정되지 않으면, 디폴트 값은 1이다. |
| 세피아 (%) | 세피아 이미지를 변환합니다. 이 변환 비율의 값을 정의한다. 100 %의 값은 전체적으로 어두운 갈색 불변 이미지의 0 %이다. 0 %와 100 % 사이의 값, 승수 효과는 선형이다. 설정하지 않으면 기본 값은 0입니다; |
| URL을 () | URL 함수는 SVG 필터를 설정하는 XML 파일을 취하고, 특정 필터 요소를 지정하는 앵커를 포함 할 수있다. 예를 들면 : filter: url(svg-url#element-id) |
| 초기 | : 속성, 기본값을 참조로 설정되어 CSS의 초기 키워드 |
| 상속 | 이 속성은 부모 요소에서 상속, 당신은 볼 수 는 CSS에게 상속 키워드를 |
더 많은 예제
대비 기능 인스턴스
화상의 콘트라스트 조절 :
-webkit-필터 : 대비 (200 % ) / * 크롬, 사파리, 오페라 * /
필터 : 대비 (200 %);
}
»시도
드롭 그림자 기능 예
이미지에 그림자 효과를 설정합니다 :
-webkit-필터 : 드롭 그림자 ( 8px 8px 10px 빨간색); / * 크롬, 사파리, 오페라 * /
필터 : 드롭 그림자 (8px 8px 10px 빨간색);
}
»시도
그레이 스케일 기능 인스턴스
그레이 스케일 이미지를 변환 :
-webkit-필터 : 그레이 스케일 (50 % ); / * 크롬, 사파리, 오페라 * /
필터 : 계조 (50 %);
}
»시도
() 함수의 예 색조-회전
이미지에 응용 색조 회전 :
-webkit-필터 : 색조 - 회전 ( 90DEG); / * 크롬, 사파리, 오페라 * /
필터 : 색조 - 회전 (90DEG) ;
}
»시도
불투명도 기능 인스턴스
이미지의 투명도 전환 과정 :
-webkit-필터 : 불투명도 (30 % ); / * 크롬, 사파리, 오페라 * /
필터 : 불투명도 (30 %);
}
»시도
함수 인스턴스를 포화
이미지의 채도를 변환 :
-webkit-필터 : 포화 (8백퍼센트 ); / * 크롬, 사파리, 오페라 * /
필터 : 전화 (800 %) 포화;
}
»시도
세피아 기능 인스턴스
세피아 이미지를 변환 :
-webkit-필터 : 세피아 (100 % ) / * 크롬, 사파리, 오페라 * /
필터 : 세피아 (100 %);
}
»시도
복합 기능
여러 개의 필터의 사용은, 각각의 필터는 공백으로 구분.
주 : 순서가 매우 중요하다 (예를 들어, 전체 계조의 화상을 생성한다), 세피아 (사용 전 계조 ()를 사용하여).
-webkit-필터 : 대비 (200 % )의 밝기 (150 %) / * 크롬, 사파리, 오페라 * /
필터 : 대비 (200 %)의 밝기 (150 %);
}
»시도
모든 필터의 예
다음 예는 모든 필터를 사용하는 방법을 보여줍니다
-webkit-필터 : 흐림 (4 픽셀) ;
필터 : 흐림 (4 픽셀);
}
.brightness {
-webkit-필터 : 밝기 (0.30) ;
필터 : 밝기 (0.30);
}
.contrast {
-webkit-필터 : 대조 (1백80퍼센트 );
필터 : 대조 (180퍼센트);
}
.grayscale {
-webkit 필터 : 계조 (100 % );
필터 : 계조 (100 %);
}
.huerotate {
-webkit-필터 : 색조 - 회전 ( 180도)
필터 : 색조 - 회전 (180도) ;
}
.invert {
-webkit 필터 : 반전 (100 % );
필터 : 반전 (100 %);
}
.opacity {
-webkit 필터 : 불투명도 (50 % );
필터 : 불투명도 (50 %);
}
.saturate {
-webkit-필터 : 포화 (7) ;
필터 : 포화 (7);
}
.sepia {
-webkit 필터 : 세피아 (100 % );
필터 : 세피아 (100 %);
}
.shadow {
-webkit-필터 : 드롭 그림자 ( 8px 8px 10px 녹색);
필터 : 드롭 그림자 (8px 8px 10px 녹색);
}
»시도
관련 기사
HTML DOM 참조 : 스타일 필터 특성