1. blend란?
: 두개의 이미지 또는 그 이상을 겹쳐놨을 때 다른 색상 차이를 혼합해서 생각지도 못한 효과를 만들어내는 것을 말한다.
2. blend 활용
배경 색상과 배경 이미지를 blend로 혼합해보자.
아래의 코드처럼 배경 색상은 빨간색이고 배경 이미지는 산일 때 background-blend-mode를 사용하면 아래와 같은 결과가 나온다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.blend{
height: 400px;
border: 5px solid;
background-color: red;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/0c/Mount_Everest%2C_Himalayas.jpg');
background-size: cover;
background-blend-mode: color-dodge;
}
</style>
</head>
<body>
<div class="blend">
</div>
</body>
</html>
배경 색상을 변경하거나 background-blend-mode의 속성을 변경하면 다른 느낌의 이미지를 만들 수 있다.
3. blend의 프로퍼티
| 요소 | 설명 |
| normal | 기본값, 색상 혼합이 적용되지 않고 상단에 위치한 요소의 색상으로만 표시된다. |
| color | 겹쳐진 두 요소의 색상에서 앞쪽 요소의 색조와 채도를 가지되 뒤쪽 요소의 명도를 반영하여 혼합하여 표시한다. |
| color-burn | 겹쳐진 두 요소에서 뒤쪽 요소의 색을 반전하고 앞쪽 요소의 색으로 나누어 다시 반전 혼합하여 표시한다. |
| color-dodge | 겹쳐진 두 요소에서 뒤쪽 요소의 색을 기준으로 앞쪽 요소의 밝은 색을 강조하면서 혼합하여 표시한다. |
| darken | 겹쳐진 두 요소의 각각의 채널에 대해 어두운 색을 강조하며 혼합하여 색상을 표시한다. |
| difference |
겹쳐진 두 요소의 색상 중 더 어두운 색을 밝은 색에서 뺀 방식으로 혼합하여 표시한다.
|
| exclusion | difference와 유사하지만 더 적은 대비를 가진 색으로 혼합하여 표시한다. |
| hard-light | 겹쳐진 두 요소에서 앞쪽 요소의 색이 더 어두우면 multiply, 더 밝을 경우 screen 방식으로 혼합하여 표시한다. |
| hue | 겹쳐진 두 요소의 색상에서 앞쪽 요소의 색조를 가지되 뒤쪽 요소의 채도와 명도를 반영하여 혼합하여 표시한다. |
| lighten | 겹쳐진 두 요소의 각각의 채널에 대해 밝은 색을 강조하며 혼합하여 색상을 표시한다. |
| luminosity | 겹쳐진 두 요소의 색상에서 앞쪽 요소의 명도를 가지되 뒤쪽 요소의 색조와 채도를 반영하여 혼합하여 표시한다. |
| multiply | 겹쳐 있는 두 요소의 색상을 곱한 값으로 표시한다. 결과적으로 어둡게 색이 보여진다. |
| overlay | 겹쳐진 두 요소중 뒤쪽의 색이 더 어두운 경우에 multiply, 더 밝은 경우에는 screen으로 혼합하여 색상을 표시한다. |
| saturation | 겹쳐진 두 요소의 색상에서 앞쪽 요소의 채도를 가지되 뒤쪽 요소의 색조와 명도를 반영하여 혼합하여 표시한다. |
| screen | 겹쳐진 두 요소의 색상을 각각 반전한 후 서로 곱해 나온 색상을 다시 반전하여 색상을 표시한다. |
| soft-light | hard-light 방식과 유사하지만 더 부드러운 혼합 결과를 만든다. |
'Web > CSS' 카테고리의 다른 글
| [CSS] transition (0) | 2023.05.19 |
|---|---|
| [CSS] transform (0) | 2023.05.17 |
| [CSS] filter (0) | 2023.05.15 |
| [CSS] background (0) | 2023.05.15 |
| [CSS] float (0) | 2023.05.15 |
