두개의 이미지가 합성관계를 만들어 내는것을 블렌드 모드라고 하는데, css에서도 속성으로 지원하고 있다.
포토샵에서 blend mode와 같은 모습을 css에서 구현할 수 있다.
즉 겹쳐져 있는 이미지가 있을 때,
아래있는 이미지와의 합성관계를 만들어 주는데, 각 모드별로 이미지를 다르게 합성해 주어 표현력이 더 다양해 졌다.
배경에 이미지를 두개를 넣은 다음, 아래와 같은 속성 값 들 중에 한가지를 적용한다.
CSS Syntax
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;
Browser Support
아래와 같이 브라우저엥서는 완벽히 지원하지 않는 것도 있다. (20년 3월 11일 기준)
|
background-blend-mode |
크롬 35.0 |
엣지 Not supported |
파이어폭스 30.0 |
사파리 7.1 |
오페라 22.0 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이미지 및 background관련속성-3</title>
<style>
#wrap{
width:850px;
height:3000px;
overflow: hidden;
}
ul>li{
list-style:none;
float: left;
margin:0 10px;
text-align: center;
color:#fff;
}
.blend{
width:120px;
height:160px;
padding:20px;
border:10px ridge #aa32dc;
background-image:url('img/1.jpg'), url('img/2.jpg');
background-repeat: no-repeat;
background-size: contain;
}
.blend1{
background-blend-mode:multiply;
}
.blend2{
background-blend-mode:screen;
}
.blend3{
background-blend-mode:overlay;
}
.blend4{
background-blend-mode:color-dodge;
}
</style>
</head>
<body>
<div id="wrap">
<h2>★ blend-mode ★</h2>
<ul>
<li class="blend blend1"></li>
<li class="blend blend2"></li>
<li class="blend blend3"></li>
<li class="blend blend4"></li>
</ul>
</div>
</body>
</html>
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| background 속성 6 - origin (0) | 2021.01.25 |
|---|---|
| background 속성 5 - clip (0) | 2021.01.25 |
| img에 filter 처리하는 방법 (0) | 2021.01.25 |
| background 속성 3 - gradient (0) | 2021.01.25 |
| background속성 2 - attachment (0) | 2021.01.25 |
