CSS3 filter

filter

CSS의 filter 속성은 요소에 흐림 또는 색상 변화 등의 그래픽 효과를 적용합니다. 필터는 일반적으로 이미지, 배경 및 테두리의 렌더링을 조정하는 데 사용됩니다.

 

 

Syntax

/* <filter-function> values */
.filter{
  filter: blur(5px);
  filter: brightness(0.4);
  filter: contrast(200%);
  filter: drop-shadow(16px 16px 20px blue);
  filter: grayscale(50%);
  filter: hue-rotate(90deg);
  filter: invert(75%);
  filter: opacity(25%);
  filter: saturate(30%);
  filter: sepia(60%);
}

/* Multiple filters */
.multiple{
	filter: contrast(175%) brightness(3%);
}

/* Use no filter */
.filter{
	filter: none;
}

/* Global values */
.values{
  filter: inherit;
  filter: initial;
  filter: revert;
  filter: unset;
}

 

 

 

 

 

 

참고:)

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

filter - CSS: Cascading Style Sheets | MDN