분류 css

CSS Filters

컨텐츠 정보

  • 조회 146 (작성일 )

본문

CSS`filter` 속성으로 작업하는 방법


필터를 사용하면 요소에 대한 연산을 수행 할 수 있습니다.


불투명도 또는 밝기 변경과 같은 Photoshop 또는 기타 사진 편집 소프트웨어로 일반적으로 하는 일.


filter 속성을 사용합니다.


다음은 이미지에 적용된 예제입니다. 그러나 이 속성은 모든 요소에서 사용할 수 있습니다.


img {
  filter: 'something';
}


여기에 다양한 값을 사용할 수 있습니다.

  • blur() 
  • brightness() 
  • contrast() 
  • drop-shadow() 
  • grayscale() 
  • hue-rotate() 
  • invert() 
  • opacity() 
  • sepia() 
  • saturate() 
  • url()


모두 매개 변수가 필요하기 때문에 각 옵션 다음에 괄호가 표시됩니다.


img {
  filter: opacity(0.5);
}


opacity()가 0에서 1까지 한개의 값 또는 백분율을 취하므로 이미지가 50 % 투명하게 됩니다.


한 번에 여러 개의 필터를 적용 할 수도 있습니다. 


img {
  filter: opacity(0.5) blur(2px);
}


이제 각 필터에 대해 자세히 설명하겠습니다.


blur() 


요소 내용을 흐리게 만듭니다. 흐림 반경을 결정하는 데 사용할 값을 px 또는 em 또는 rem으로 전달합니다.


img {
  filter: blur(4px);
}


opacity() 


opacity()는 0에서 1까지의 한 값 또는 백분율을 취하여 이를 기반으로 이미지 투명도를 결정합니다.


0 또는 0 %는 완전히 투명 함을 의미합니다. 1 또는 100 % 또는 그 이상은 완전히 볼 수 있음을 의미합니다.


img {
  filter: opacity(0.5);
}


CSS에는 불투명도 속성이 있습니다. 그러나 구현에 따라 하드웨어 가속화 될 수 있으므로 이 방법이 선호됩니다.


drop-shadow() 


drop-shadow()는 알파 채널 다음에 오는 요소 뒤의 그림자를 보여줍니다.

즉, 투명한 이미지가 있는 경우 이미지 상자가 아닌 이미지 모양에 그림자가 적용됩니다. 이미지에 알파 채널이 없으면 섀도우가 전체 이미지 상자에 적용됩니다.


최소 2 개의 매개 변수를 허용하며 최대 5 개까지 허용됩니다.

  • offset-x는 수평 오프셋을 설정합니다. 음수 가능.
  • offset-y는 수직 오프셋을 설정합니다. 음수 가능.
  • blur-radius (선택 사항) : 그림자의 흐림 반경을 설정합니다. 기본값은 0이며 흐려짐이 없습니다.
  • spread-radius, optional, 스프레드 반경을 설정합니다. px, rem 또는 em으로 표현됨.
  • color (선택 사항) : 그림자의 색상을 설정합니다.

스프레드 반경이나 블러 반경을 설정하지 않고 색상을 설정할 수 있습니다. CSS는 값이 길이 값이 아닌 색상임을 이해합니다.


img {
  filter: drop-shadow(10px 10px 5px orange);
}



img {
  filter: drop-shadow(10px 10px orange);
}



img {
  filter: drop-shadow(10px 10px 5px 5px #333);
}


grayscale() 


요소를 회색으로 만듭니다.


0에서 1 또는 0 %에서 100 %까지의 값 중 하나를 전달합니다. 여기서 1과 100 %는 완전히 회색을 의미하고 0 또는 0 %는 이미지에 손을 대지 않았으며 원래 색상은 그대로 유지됩니다.


img {
  filter: grayscale(50%);
}


sepia() 


요소에 세피아 색을 지정합니다.


0에서 1까지 또는 0에서 100 %까지 한 값을 전달합니다. 여기서 1과 100 %는 완전히 세피아를 의미하고 0 또는 0 %는 이미지가 접촉되지 않았으며 원래 색상이 유지됨을 의미합니다.


img {
  filter: sepia(50%);
}


invert() 


요소의 색상을 반전시킵니다. 색상 반전은 HSL 색상환에서 색상의 반대 방향을 찾는 것입니다. 그 의미가 무엇인지 모르는 경우 Google에서 '색상환'을 검색하면 됩니다.

예를 들어 노란색의 반대쪽이 파란색이고 빨간색의 반대쪽이 청록색입니다. 모든 단일 색상은 반대입니다.


숫자를 0에서 1 또는 0에서 100 %로 전달합니다.이 숫자는 역전의 정도를 결정합니다. 1 또는 100 %는 전체 반전을 의미하고, 0 또는 0 %는 반전을 의미하지 않습니다.


0.5 또는 50 %는 항상 50 % 회색 색상을 렌더링합니다. 왜냐하면 항상 휠 중간에 오르기 때문입니다.


img {
  filter: invert(50%);
}


hue-rotate() 


HSL 컬러 휘도 단위로 표현됩니다. hue-rotate()를 사용하여 양수 또는 음수 회전을 사용하여 색상을 회전 할 수 있습니다.


이 함수는 deg 값을 받습니다.


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


brightness() 


요소의 밝기를 변경합니다.


0 또는 0 %는 총 검정색 요소를 제공합니다. 1 또는 100 %는 변경되지 않은 이미지를 제공합니다.


1 또는 100 %보다 높은 값은 전체 흰색 요소에 도달 할 때까지 이미지를 더 밝게 만듭니다.



img {
  filter: brightness(50%);
}


contrast() 


요소의 대비를 변경합니다.


0 또는 0 %는 총 회색 요소를 제공합니다. 1 또는 100 %는 변경되지 않은 이미지를 제공합니다.


1 또는 100 %보다 높은 값은 더 많은 대비를 제공합니다.


img {
  filter: contrast(150%);
}


saturate() 


요소의 채도를 변경합니다.


0 또는 0 %는 채도가 낮은 총 회색조 요소를 제공합니다. 1 또는 100 %는 변경되지 않은 이미지를 제공합니다.


1 또는 100 %보다 큰 값은 더 많은 채도를 제공합니다.


img {
  filter: saturate();
}


url() 


이 필터를 사용하면 SVG 파일에 정의 된 필터를 적용 할 수 있습니다. SVG 파일 위치를 가리 킵니다.


img {
  filter: url(filter.svg);
}