블랜드는 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법입니다.
background-blend-mode
<!doctype html>
<html>
<head>
<style>
.blend{
height:400px;
border:5px solid;
background-color: rgba(255,0,0,0.5);
background-size:cover;
background-image:url('sample.mt.jpg');
background-blend-mode: saturation;
transition:background-color 10s;
}
.blend:hover{
background-color: rgba(255,0,0,1);
transition:background-color 5s;
}
</style>
</head>
<body>
<div class="blend">
</div>
</body>
</html>
배경이미지와 배경색을 혼합한다
background-size를 cover로 하면 전체이미지가 다 보인다
background-blend-mode를 color color-burn color-dodge darken difference exclusion 등으로 설정할 수 있다
.blend hover를 선택자로 주면 마우스를 댔을 때 효과를 설정할 수 있다
transition은 장면전환
mix-blend-mode
<!doctype html>
<html>
<head>
<style>
body{
background-image: url(sample.mt.jpg);
}
.blend{
font-size:2rem;
font-weight: bold;
color:red;
mix-blend-mode:screen;
}
</style>
</head>
<body>
<div class="blend">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, maiores!</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam quibusdam cupiditate, necessitatibus ratione illum asperiores sint voluptate vel ex esse vero culpa. Totam aliquam minus eum sequi commodi vitae numquam officia placeat repellat, alias dignissimos. Commodi optio ipsam illum culpa voluptatum, obcaecati veritatis rem similique molestiae fugit autem, animi.
</div>
</body>
</html>
컨텐트와 배경을 믹스하는 방법
mix-blend-mode를 준다 그러면 시각적인 효과가 달라진다
background-blend-mode는 배경끼리의 합성이고 mix-blend-mode는 컨텐츠와 배경 사이의 합성이다
댓글