예
흑백 이미지의 색상 변경 (100% grayscale) :
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
»그것을 자신을 시도 정의 및 사용
필터 속성은 추가 비주얼 효과 (like blur and saturation) 이미지를.
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
웹킷 다음 숫자는 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| filter | 18.0 웹킷 | 13.0 | 35.0 | 6.0 웹킷 | 15.0 웹킷 |
참고 : 크롬, 사파리와 오페라의 방법은 WebkitFilter 속성을 지원합니다.
통사론
필터 속성을 반환합니다 :
object .style.filter필터 속성을 설정합니다 :
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
필터 기능
참고 : 백분율 값 사용하는 필터 (ie 75%) , 또한 진수로 값 동의 (ie 0.75) .
| 필터 | 기술 |
|---|---|
| 없음 | 어떤 효과를 지정합니다 |
| blur( px ) | 이미지에 흐림 효과를 적용합니다. 값이 클수록 더 흐림을 생성합니다. 값을 지정하지 않으면, 0이 사용됩니다. |
| brightness( % ) | 이미지의 밝기를 조절한다. 0 %는 이미지가 완전히 검은 색 할 것입니다. 100 % (1) 기본이며, 원래의 이미지를 나타낸다. 100 % 이상의 값은 밝은 결과를 제공 할 것이다. |
| contrast( % ) | 화상의 콘트라스트를 조절한다. 0 %는 이미지가 완전히 검은 색 할 것입니다. 100 % (1) 기본이며, 원래의 이미지를 나타낸다. 100 % 이상의 값 이하 대조 결과를 제공한다. |
| 드롭 shadow( h-shadow v-shadow blur spread color ) | 이미지에 그림자 효과를 적용합니다. 가능한 값 : H-그림자 - 필수. 수평 그림자의 화소 값을 지정한다. 음의 값은 이미지의 왼쪽에 그림자를 배치합니다. V-그림자 - 필수. 수직 그림자의 화소 값을 지정한다. 음수 값은 이미지 위에 그림자를 배치합니다. 블러 - 선택 사항. 이것은 제 3 값이고, 픽셀이어야한다. 새도우 흐림 효과를 추가한다. 값이 클수록 더 흐림 (그림자가 더 가벼워진다)를 생성한다. 음수 값은 허용되지 않습니다. 값이 지정되지 않으면, 0 (그림자의 엣지가 선명)이 사용된다. 확산 - 선택 사항. 이것은 4 값이고, 픽셀이어야한다. 양수 값은 그림자가 확장하여 더 큰 성장의 원인이되며, 음수 값은 그림자가 수축하게됩니다. 지정되지 않은 경우에는 0이 될 것이다 (the shadow will be the same size as the element) . 참고 : 크롬, 사파리와 오페라, 그리고 어쩌면 다른 브라우저는이 4 길이를 지원하지 않습니다; 추가 한 경우는 렌더링되지 않습니다. 색상 : 선택 사항. 그림자에 색상을 추가합니다. 지정되지 않은 경우, 색상은 브라우저에 따라 다릅니다 (often black) . 팁 :이 필터는 비슷합니다 박스 그림자 속성입니다. |
| grayscale( % ) | 그레이 스케일 이미지로 변환합니다. 0 % (0) 기본이며, 원래의 이미지를 나타낸다. 100 % 완전히 회색 화상 것 (used for black and white images) . 참고 : 음수 값이 허용되지 않습니다. |
| hue- rotate( deg ) | 이미지에 색조 회전을 적용합니다. 이 값은 이미지 샘플을 조정한다 색상환 ° 부근의 수를 정의한다. 0deg은 기본이며, 원본 이미지를 나타냅니다. 참고 : 최대 값은 360deg입니다. |
| invert( % ) | 이미지의 샘플을 반전합니다. 0 % (0) 기본이며, 원래의 이미지를 나타낸다. 100 % 이미지가 완전히 반전 할 것입니다. 참고 : 음수 값이 허용되지 않습니다. |
| opacity( % ) | 이미지의 불투명도 레벨을 설정합니다. 불투명도 수준의 투명성 수준을 설명합니다 : 0 %는 완전히 투명하다. 100 % (1) 기본이며, 원 화상 나타낸다 (no transparency) . 참고 : 음수 값이 허용되지 않습니다. 팁 :이 필터는 유사하다 불투명도 속성입니다. |
| saturate( % ) | 이미지를 포화. 0 % (0) 이미지가 완전히 포화되지 않은 것. 100 %는 기본이고 원본 이미지를 나타냅니다. 100 % 이상의 값은 과포화 결과를 제공합니다. 참고 : 음수 값이 허용되지 않습니다. |
| sepia( % ) | 세피아에 이미지를 변환합니다. 0 % (0) 기본이며, 원래의 이미지를 나타낸다. 100 % 이미지가 완전히 세피아 할 것입니다. 참고 : 음수 값이 허용되지 않습니다. |
기술적 세부 사항
| CSS 버전 | CSS3 |
|---|
관련 페이지
CSS 참조 : filter property
<스타일 개체