CSS Blend Mode를 활용한 이미지 효과(background-blend-mode)

HTML&CSS

by 코드공작소 2023. 12. 26. 13:48

CSS Blend Mode는 여러 이미지나 요소들을 혼합하여 새로운 시각적 효과를 만들 수 있는 강력한 도구 중 하나입니다. 이번 포스팅에서는 CSS Blend Mode를 활용하여 다양한 이미지 효과를 만드는 방법에 대해 알아보겠습니다.

기본 개념 이해하기
Blend Mode는 두 요소를 섞을 때 적용되며, background-blend-mode 속성을 사용하여 설정할 수 있습니다. 기본적으로 normal이 적용되어 있으며, 이 외에도 여러 가지 모드가 있습니다.

사용할 이미지

1. HTML 구조
먼저, HTML 구조를 정의해봅시다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Blend Mode를 활용한 이미지 효과</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- 이미지가 효과를 나타낼 컨테이너 -->
<div class="blend-container"></div>

</body>
</html>

2. CSS 스타일
이제 CSS를 사용하여 이미지와 효과를 적용하는 스타일을 정의합니다.

- screen

/* styles.css */
.blend-container {
  width: 640px;
  height: 427px;
  background: url("image1.jpg") center/cover, url("image2.jpg") center/cover;
  background-blend-mode: screen;
}

- multiply

/* styles.css */
.blend-container {
  width: 640px;
  height: 427px;
  background: url("image1.jpg") center/cover, url("image2.jpg") center/cover;
  background-blend-mode: multiply;
}

- overlay

/* styles.css */
.blend-container {
  width: 640px;
  height: 427px;
  background: url("image1.jpg") center/cover, url("image2.jpg") center/cover;
  background-blend-mode: overlay;
}

이제 브라우저에서 HTML 파일을 열어 결과를 확인해봅시다. 두 이미지가 블렌딩되어 특별한 효과가 나타날 것입니다.

background-blend-mode 속성 값:

normal: 기본값으로, 일반적인 배경 이미지 표시.
multiply: 이미지를 곱합니다. 어두운 부분이 두 배 더 어두워집니다.
screen: 이미지를 스크린처럼 합칩니다. 밝은 부분이 두 배 더 밝아집니다.
overlay: 이미지를 오버레이합니다. 어두운 부분은 어두워지고 밝은 부분은 밝아집니다.
darken: 이미지 중 어두운 부분을 사용합니다. 두 이미지 중 어두운 부분이 표시됩니다.
lighten: 이미지 중 밝은 부분을 사용합니다. 두 이미지 중 밝은 부분이 표시됩니다.
color-dodge: 컬러 도지(blending) 모드를 사용하여 이미지를 결합합니다.
color-burn: 컬러 번(blending) 모드를 사용하여 이미지를 결합합니다.
hard-light: 하드 라이트(blending) 모드를 사용하여 이미지를 결합합니다.
soft-light: 소프트 라이트(blending) 모드를 사용하여 이미지를 결합합니다.
difference: 이미지 간의 차이를 사용하여 결합합니다.
exclusion: 이미지 간의 배제(blending) 모드를 사용하여 결합합니다.
hue: 이미지의 색조를 사용하여 결합합니다.
saturation: 이미지의 채도를 사용하여 결합합니다.
color: 이미지의 색상을 사용하여 결합합니다.
luminosity: 이미지의 밝기를 사용하여 결합합니다.

이상으로 CSS Blend Mode를 활용한 이미지 효과에 대한 간단한 예제를 소개했습니다.
더 다양한 효과를 실험해보며 창의적인 디자인을 구현해보세요!

저작자표시

'HTML&CSS' 카테고리의 다른 글

CSS와 Web Accessibility: 접근성을 고려한 디자인 (3)	2024.01.07
CSS에서의 상속과 우선순위 이해하기 (2)	2023.12.27
CSS 그리드 시스템 구현하기: Float vs. Grid (0)	2023.12.26
CSS에서 SVG를 사용한 그래픽 디자인 (0)	2023.12.23
CSS 박스 모델 이해하기: Content, Padding, Border, Margin (0)	2023.12.22