웹 디자인에서 이미지의 명암을 조절하여 동적이고 매력적인 시각적 효과를 만들 수 있습니다. CSS의 brightness와 contrast 속성을 사용하여 이미지에 필터를 적용하여 이를 달성할 수 있습니다.

이 포스트에서는 CSS 강도 필터를 사용하여 이미지의 명암을 조절하는 방법에 대해 알아보겠습니다.

1. brightness 속성

brightness 속성은 이미지의 밝기를 조절합니다. 0%부터 100%까지의 값을 가질 수 있으며, 0%는 완전 어둡고 100%는 원본 이미지와 동일한 밝기를 갖습니다.

예를 들어, 다음과 같은 CSS를 사용하여 이미지에 밝기 필터를 적용할 수 있습니다:

.image {
  filter: brightness(150%); /* 150% 밝기로 조절 */
}

2. contrast 속성

contrast 속성은 이미지의 대비를 조절합니다. 0%부터 100%까지의 값을 가질 수 있으며, 0%는 완전 흐릿하고 100%는 원본 이미지와 동일한 대비를 갖습니다.

예를 들어, 다음과 같은 CSS를 사용하여 이미지에 대비 필터를 적용할 수 있습니다:

.image {
  filter: contrast(200%); /* 200% 대비로 조절 */
}

적용 예시

아래는 brightness와 contrast 속성을 조합하여 이미지에 필터를 적용한 예시입니다:

.image {
  filter: brightness(120%) contrast(150%);
}

이러한 CSS 필터를 사용하여 이미지에 동적이고 매력적인 시각적 효과를 부여할 수 있습니다.

위 내용은 다음 자료를 참고하여 작성되었습니다:

• MDN Web Docs: filter