div {
width: 280px;
height: 150px;
background-repeat: no-repeat;
background-image: url('http://ezcode.kr/study/css/img/blend.jpg');
float: left;
margin: 10px;
}
hr {clear: both}
.gr {
background-image: linear-gradient(to right, blue 0%, red 100%);
}
#blend {
background-image:
url('http://ezcode.kr/study/css/img/blend.jpg'),
linear-gradient(to right, blue 0%, red 100%);
background-blend-mode: normal;
}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<h1>background-blend-mode</h1>
<p>옵션을 변경하여 그라디언트와의 합성모드를 확인하세요.</p>
background-blend-mode : <select id="select">
<option value="normal">normal</option>
<option value="multiply">multiply</option>
<option value="screen">screen</option>
<option value="overlay">overlay</option>
<option value="darken">darken</option>
<option value="lighten">lighten</option>
<option value="color-dodge">color-dodge</option>
<option value="saturation">saturation</option>
<option value="color">color</option>
<option value="luminosity">luminosity</option>
</select>
<hr>
<div id="blend"></div>
<hr>
<div></div>
<div class="gr"></div>
</body>
</html>