CSS 필터 속성
- 이전 페이지 empty-cells
- 다음 페이지 flex
정의와 사용법
filter 속성은 요소(일반적으로 <img>)의 시각 효과(예: 불투명도와 풍부도)를 정의합니다.
추가로 참조:
CSS 강의:CSS 이미지
HTML DOM 참조 설명서:filter 속성
예제
모든 이미지를 흑백으로 변경하십시오 (100% 회색):
img { filter: grayscale(100%); }
훌륭한 팁:페이지 하단에서 더 많은 TIY 예제를 찾을 수 있습니다.
CSS 문법
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
훌륭한 팁:여러 필터를 사용하려면 각 필터 사이에 공백을 두고( 페이지 아래의 더 많은 예제를 참조하세요).
기술 세부 사항
기본 값: | none |
---|---|
thừa kế: | 아니요 |
애니메이션 제작: | 지원됩니다. 참조:애니메이션 관련 속성。 |
버전: | CSS3 |
JavaScript 문법: | object.style.filter="grayscale(100%)" |
필터 함수
주석:백분율 값(예: 75%)의 필터를 사용하며, 이 값이 δεcimal(예: 0.75)도 허용됩니다.
필터 | 설명 |
---|---|
none | 기본 값입니다. 효과를 지정합니다. |
blur(px) |
이미지에 흐림 효과를 적용합니다. 큰 값은 더 많은 흐림을 생성합니다. 지정된 값이 있으면 0을 사용합니다. |
brightness(%) |
이미지의 밝기를 조정합니다.
|
contrast(%) |
이미지의 대비도를 조정합니다.
|
drop-shadow(h-shadow v-shadow blur spread color) |
이미지에 그림자 효과를 적용합니다. 가능한 값:
blur - 선택 사항입니다. 이는 세 번째 값으로, 단위는 픽셀입니다. 그림자에 흐림 효과를 추가합니다. 값이 클수록 더 많은 흐림이 생성되며(그림자가 더 크고 밝아집니다). 음수는 허용되지 않습니다. 값이 지정되지 않으면 0(그림자의 경계가 매우 뚜렷합니다)이 사용됩니다. spread - 선택 사항입니다. 이는 네 번째 값으로, 단위는 픽셀입니다. 양수는 그림자가 확장되고 더 커지게 합니다. 음수는 그림자가 축소되게 합니다. 값이 지정되지 않으면 0(그림자가 요소의 크기와 같습니다)이 사용됩니다. 주석:Chrome, Safari, Opera, 그리고 다른 브라우저도 4번째 길이를 지원하지 않습니다; 추가하면 표시되지 않습니다. color - 선택 사항입니다. 그림자에 색상을 추가합니다. 지정하지 않으면 색상은 브라우저에 따라 다릅니다(대부분 검은색입니다). 이 예제는 빨간 그림자를 생성하며, 수평과 수직 방향 모두 8px로, 10px의 흐림 효과가 있습니다: filter: drop-shadow(8px 8px 10px red); 훌륭한 팁:이 필터는 box-shadow 속성과 유사합니다。 |
grayscale(%) |
이미지를 그레이스케일로 변환합니다。
주석:부정 값은 허용되지 않습니다。 |
hue-rotate(deg) |
이미지에 색상 톤 회전을 적용합니다. 이 값은 색상 톤의 도를 정의합니다. 기본 값은 0deg로 원본 이미지를 나타냅니다。 주석:최대 값은 360deg입니다。 |
invert(%) |
이미지의 샘플을 반전합니다。
주석:부정 값은 허용되지 않습니다。 |
opacity(%) |
이미지의 불투명도 수준을 설정합니다。opacity-level은 투명도 수준을 설명하며:
주석:부정 값은 허용되지 않습니다。 훌륭한 팁:이 필터는 opacity 속성과 유사합니다。 |
saturate(%) |
이미지의 포화도를 설정합니다。
주석:부정 값은 허용되지 않습니다。 |
sepia(%) |
이미지를 브라운으로 변환합니다。
주석:부정 값은 허용되지 않습니다。 |
url(); |
url() 함수는 SVG 필터의 XML 파일 위치를 정의하며, 특정 필터 요소에 대한 앵커를 포함할 수 있습니다. 예제: filter: url(svg-url#element-id); |
initial | 이 속성을 기본 값으로 설정합니다。 참조 initial。 |
inherit | 부모 요소에서 이 속성을 继承합니다。 참조 inherit。 |
더 많은 예제
흐림 예제
이미지에 흐림 효과를 추가합니다:
img { filter: blur(5px); }
흐림 예제 2
배경 이미지를 흐림으로 적용합니다:
img.background { filter: blur(35px); }
밝기 예제
이미지의 밝기를 조정합니다:
img { filter: brightness(200%); }
대비 예제
이미지의 대비를 조정합니다:
img { filter: contrast(200%); }
그림자 예제
이미지에 그림자 효과를 적용합니다:
img { filter: drop-shadow(8px 8px 10px gray); }
그레이스케일 예제
이미지를 그레이스케일로 변환합니다:
img { filter: grayscale(50%); }
색상 회전 예제
이미지에 색상 회전을 적용합니다:
img { filter: hue-rotate(90deg); }
반전 예제
이미지의 샘플을 반전합니다:
img { filter: invert(100%); }
불투명도 예제
이미지의 불투명도 수준을 설정합니다:
img { filter: opacity(30%); }
풍부도 예제
이미지의 풍부도를 조정합니다:
img { filter: saturate(800%); }
갈색 예제
이미지를 갈색으로 변환합니다:
img { filter: sepia(100%); }
다중 필터 사용
여러 필터를 사용하려면 각 필터를 공백으로 구분하세요. 순서가 중요합니다(예: sepia() 다음에 grayscale()를 사용하면 완전히 회색의 이미지가 생성됩니다):
img { filter: contrast(200%) brightness(150%); }
모든 필터
모든 필터 함수를 시연합니다:
.blur { filter: blur(4px); } .brightness { filter: brightness(0.30); } .contrast { filter: contrast(180%); } .grayscale { filter: grayscale(100%); } .huerotate { filter: hue-rotate(180deg); } .invert { filter: invert(100%); } .opacity { filter: opacity(50%); } .saturate { filter: saturate(7); } .sepia { filter: sepia(100%); } .shadow { filter: drop-shadow(8px 8px 10px green); }
브라우저 지원
표의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
prefix를 사용하는 첫 번째 버전의 숫자는 -webkit-를 포함하고 있습니다.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
53.0 18.0 -webkit- |
13.0 | 35.0 | 9.1 6.0 -webkit- |
40.0 15.0 -webkit- |
주석:4.0에서 8.0까지의 더 오래된 인터넷 익스플로어어 버전은 폐지된 비표준 "filter" 속성을 지원합니다. IE8 및 이하 버전의 지원이 필요할 때, 투명도에 주로 사용됩니다.
- 이전 페이지 empty-cells
- 다음 페이지 flex