웹 페이지 디자인에 사용되는 이미지는 종종 효과적으로 표현하기 위해 사용됩니다. 그러나 때로는 페이지의 특정 부분에서 이미지를 가리고 싶을 때도 있습니다. 이때 CSS 필터를 사용하여 이미지를 가리는 방법을 알아보겠습니다.

1. opacity 속성 사용

.image {
  opacity: 0.5;
}

opacity 속성을 사용하여 이미지의 불투명도를 조절할 수 있습니다. 값은 0에서 1까지이며, 0에 가까울수록 투명해지고 1에 가까울수록 불투명해집니다.

2. 이미지에 흑백 필터 적용

.image {
  filter: grayscale(100%);
}

filter 속성을 사용하여 이미지에 흑백 필터를 적용할 수 있습니다. grayscale() 함수에 값을 지정하여 이미지를 흑백으로 변환할 수 있습니다.

3. 이미지 모션 효과 적용

.image {
  filter: blur(5px);
}

filter 속성을 사용하여 이미지에 모션 효과를 적용할 수도 있습니다. blur() 함수에 값을 지정하여 이미지를 흐림 효과를 줄 수 있습니다.

이렇듯 CSS 필터를 이용하여 이미지를 가리는 다양한 방법이 있습니다. 이미지를 효과적으로 가리고 웹 페이지 디자인에 적용해보세요.

참고 자료

• MDN Web Docs - Using CSS Filters