css filter 속성

 

filter

- blur : 요소의 흐림효과 조절

- brightness : 요소의 밝기 조절

- contrast : 요소의 명도 대비 조절

- grayscale : 요소의 흑백 지정

- hue-rotate : 요소의 색상 단계를 조절

- invert : 요소의 색상 반전 단계 조절

- saturate : 요소의 채도 조절

- sepia : 요소의 갈색톤 단계 조절

 

 

/* blur  - 값이 커질수록 blur 효과가 커짐 */

div img:nth-of-type(2){

    filter: blur(3px);

}

 

/* brightness - 1보다 작아지면 어두워지고 커지면 밝아짐 */

div img:nth-of-type(3){

    filter: brightness(0.5);

}

 

/* contrast - 100%에서 작아지면 명암대비 효과 감소, 커지면 증가*/

div img:nth-of-type(4){

    filter: contrast(50%);

}

 

/* grayscale - 100%에 가까울수록 흑백으로 전환 */

div img:nth-of-type(5){

    filter: grayscale(100%);

}

 

/* hue-rotate - 0deg는 원래 이미지 색상, 0~360 까지  */

div img:nth-of-type(6){

    filter: hue-rotate(180deg);

}

 

/* invert - 100%에 가까울수록 색이 반대로 변환됨 */

div img:nth-of-type(7){

    filter: invert(100%);

}

 

/* saturate - 0에 가까울수록 채도가 낮아짐 */

div img:nth-of-type(8){

    filter: saturate(0.5);

}

 

/* sepia - 100%에 가까울수록 갈색톤으로 변경이 된다 */

div img:nth-of-type(9){

    filter: sepia(100%);

}