filter는 하나의 이미지에 효과를 주는 방식이고,
blend는 "혼합한다, 섞는다"는 뜻으로, 두 개 이상의 이미지를 혼합해서 여러가지의 임펙트를 만들어 내는 방식입니다.
[ background-blend-mode ]
background-color와 background-image를 혼합 할 때는 background-blend-mode를 사용합니다.
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("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbd8q3Z%2FbtrsiGBVkWX%2FlkXxH2ux9BNccNXgYYi7W0%2Fimg.jpg");
background-blend-mode: darken;
}
.blend:hover {
background-color: rgba(255, 0, 0, 1);
}
</style>
</head>
<body>
<div class="blend"></div>
</body>
</html>
[ mix-blend-mode ]
어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정
즉, 콘텐츠와 백그라운드 간에 블렌드를 할 수 있는 속성입니다.
더보기
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbd8q3Z%2FbtrsiGBVkWX%2FlkXxH2ux9BNccNXgYYi7W0%2Fimg.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. In quibusdam
incidunt perspiciatis iste eius? Repudiandae quod harum adipisci ad ex
voluptatem eius nobis, libero vitae, doloribus, nam odit impedit enim
error alias earum est beatae quasi illum expedita esse culpa. Inventore
enim eum libero laudantium maiores deserunt fugit repellat nulla?
</h1>
</div>
</body>
</html>'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] transition (0) | 2022.02.06 |
|---|---|
| [생활코딩] transform (0) | 2022.02.05 |
| [생활코딩] filter (0) | 2022.02.05 |
| [생활코딩] background (0) | 2022.02.05 |
| [생활코딩] float (1) | 2022.02.04 |
댓글