예
흑백으로 모든 이미지의 색상 변경 (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
팁 : 더는 "Try it Yourself" 아래의 예.
정의 및 사용
필터 속성은 시각 효과 정의 (like blur and saturation) 요소에을 (often <img>) .
| 기본값: | 없음 |
|---|---|
| 상속 : | no |
| 애니메이션 : | yes. Read about animatable |
| 번역: | CSS3 |
| 자바 스크립트 구문 : | object .style.WebkitFilter="grayscale(100%)" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
-webkit- 다음 숫자는 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| filter | 18.0 -webkit- | 13.0 | 35.0 | 9.1 6.0 -webkit- | 15.0 -webkit- |
참고 : 인터넷 익스플로러의 이전 버전 (4.0 to 8.0) 표준이 아닌 지원 "filter" 더 이상 사용되지 속성을. 이 주로 사용되었다 불투명 IE8 아래에서 지원을 필요로 할 때.
CSS 구문
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();팁 : 공백으로 각 필터를 분리, 여러 개의 필터를 사용하려면 (See "More Examples" below) .
필터 기능
주 : 백분율 값을 사용하여 필터 (ie 75%) ,도 진수로 값이 허용 (ie 0.75) .
| 필터 | 기술 | 플레이 |
|---|---|---|
| none | 기본값. 어떤 효과를 지정합니다 | »플레이 |
| blur( px ) | 이미지에 흐림 효과를 적용합니다. 값이 클수록 더 많은 흐림 효과를 만듭니다. 값을 지정하지 않으면, 0이 사용됩니다. | »플레이 |
| brightness( % ) | 이미지의 밝기를 조정합니다. 0 %는 이미지가 완전히 검은 색 할 것입니다. 100 % (1) 기본이며, 원본 이미지를 나타냅니다. 100 % 이상의 값은 밝은 결과를 제공 할 것입니다. | »플레이 |
| contrast( % ) | 이미지의 대비를 조정합니다. 0 %는 이미지가 완전히 검은 색 할 것입니다. 100 % (1) 기본이며, 원본 이미지를 나타냅니다. 100 % 이상의 값은 적은 반면에 결과를 제공 할 것입니다. | »플레이 |
| drop-shadow( h-shadow v-shadow blur spread color ) | 이미지에 그림자 효과를 적용합니다. 가능한 값 : H-그림자 - 필요합니다. 수평 그림자의 픽셀 값을 지정합니다. 음의 값은 영상의 왼쪽에 그림자를 놓는다. V-그림자 - 필요합니다. 수직 그림자의 픽셀 값을 지정합니다. 음수 값은 이미지 위의 그림자를 배치합니다. 흐림 - 옵션. 이 제 3 값이고, 픽셀이어야한다. 그림자에 흐림 효과를 추가합니다. 값이 클수록 더 많은 흐림 효과 (그림자가 더 크고 밝게된다)이 생성됩니다. 음수 값은 허용되지 않습니다. 값을 지정하지 않으면, 0 (그림자의 가장자리가 날카로운)이 사용됩니다. 확산 - 옵션. 이 네번째 값이고, 픽셀이어야한다. 양수 값은 그림자가 확장하여 더 큰 성장의 원인이되며, 음수 값은 그림자가 수축하게됩니다. 지정되지 않은 경우에는 0으로한다 (the shadow will be the same size as the element) . 참고 : 크롬, 사파리와 오페라, 그리고 아마 다른 브라우저는이 4 길이를 지원하지 않습니다; 추가 한 경우는 렌더링되지 않습니다. 색상 - 옵션. 그림자에 색상을 추가합니다. 지정되지 않은 경우, 컬러는 브라우저에 따라 (often black) . 10px의 흐림 효과, 수평 및 수직 8px 큰 붉은 그림자 생성의 예 : 필터 : 드롭 그림자 (8px 8px 10px 빨간색); 팁 :이 필터는 비슷합니다 상자 그림자 속성입니다. | »플레이 |
| 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 %는 이미지가 완전히 세피아 할 것이다. 참고 : 음수 값이 허용되지 않습니다. | »플레이 |
| url() | url() 함수는 SVG 필터를 지정하는 XML 파일의 위치를 취하고, 특정 필터 요소에 앵커를 포함 할 수있다. 예: 필터 : url(svg-url#element-id) | |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
블러 예
이미지에 흐림 효과를 적용합니다 :
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
밝기 예
화상의 밝기를 조정 :
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
예를 대조
화상의 콘트라스트 조절 :
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
그림자 예
이미지에 그림자 효과를 적용 :
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
그레이 스케일 예
그레이 스케일 이미지를 변환 :
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
색조 회전 예
이미지에 색조 회전을 적용합니다 :
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
반전 예
이미지의 샘플 전환 :
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
불투명도 예
이미지의 불투명도 레벨을 설정합니다 :
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
포화 예
이미지를 포화 :
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
세피아 예
세피아 이미지를 변환 :
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
결합 필터 / 다중 필터
여러 개의 필터를 사용하려면, 공백으로 각 필터를 분리합니다.
참고 : 주문이 중요하다 (ie using grayscale() 후 sepia() 완전히 회색 이미지가 발생합니다).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
전체 필터
모든 필터 기능의 데모 :
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} »그것을 자신을 시도 관련 페이지
HTML DOM 참조 : filter property