CSS
필터 속성

통사론

• 필터 : 없음 (기본값)
• filter : 초기 값 (기본값은 none);
• 필터 : 상속 (기본값은 부모 값);
• 필터 : blur (px)
• 필터 : 밝기 (숫자 | %)
• 필터 : 대비 (수 | %)
• 필터 : 드롭 섀도우 (가로 그림자 xx 세로 그림자 xp 섀도우 블러 px 섀도우 - 확산 색)
• 필터 : 그레이 스케일 (숫자 | %)
• 필터 : hue-rotate (deg)
• 필터 : 반전 (숫자 | %)
• 필터 : 불투명도 (수 | %)
• 필터 : 포화 (수 | %)
• 필터 : 세피아 (숫자 | %)

매개 변수

비고

그림자 제거 (가능한 경우 상자 그림자 사용)

HTML

<p>My shadow always follows me.</p>

CSS

p {
    -webkit-filter: drop-shadow(10px 10px 1px green);
    filter: drop-shadow(10px 10px 1px green);
}

결과

여러 필터 값

여러 필터를 사용하려면 각 값을 공백으로 구분하십시오.

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
    -webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
    filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}

결과

색조 회전

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
    -webkit-filter: hue-rotate(120deg);
    filter: hue-rotate(120deg);
}

결과

색상 반전

HTML

<div></div>

CSS

div {
    width: 100px;
    height: 100px;
    background-color: white;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

결과

흰색에서 검은 색으로 바뀝니다.

흐림

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
    -webkit-filter: blur(1px);
    filter: blur(1px);
}

결과

너 안경을 문지르고 싶어.