728x90
https://hyoni-k.tistory.com/48
mix-blend-mode : 요소를 겹치는 효과
이미지 등의 요소가 겹치는 경우 중첩된 상태를 표시하는 방법에 대해 알아보고자 한다. 포토샵에서 사용하는 블렌드 모드와 유사한데, 이 효과를 css에서도 사용할 수 있다. 서로 다른 요소(ex.
hyoni-k.tistory.com
핵심적인 아이디어는 mix-blend-mode 를 설정해서 각 레이어의 색상을 섞는 것이다. position: fixed 로 설정하면 배경화면은 무시하고, 아래쪽에 있던 글자들은 브라우저 상단으로 올라온다. 이때 position: fixed 로 설정한 배경화면의 레이어가 텍스트(position: static)보다 더 높기 때문에 글자는 아래쪽 레이어에 가려진다. 그래서 글자를 담고 있는 컨테이너에 position: absolute 를 설정하면 같은 레이어가 되고, 배경화면보다 문서에서 뒤쪽에 있기 때문에 나중에 그려져서 이번에는 글자가 화면에 보인다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>design practice</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg"></div>
<div class="container">
<section class="home">my life is good</section>
<section class="about">you can live your life</section>
<section class="contact"></section>
<section class="setting">you can do it</section>
<section class="map">you are the best <br/> in the world</section>
</div>
<script src="app.js"></script>
</body>
</html>body{
margin: 0; padding: 0;
}
.bg{
width: 100vw;
height: 100vh;
background-image: url(https://www.yachtandboat.com/wp-content/uploads/2018/12/hero-image-2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: fixed; /* 백그라운드 배경 고정 */
}
.container{
position: absolute; /* 컨테이너 위치를 바디로 끌어올림 */
left: 0; top: 0;
}
.container section{
width: 100vw;
height: 30rem;
border-bottom: 1px solid #ccc;
z-index: 1;
text-align: center;
font-size: 10rem;
font-weight: bold;
}
/* contact 섹션을 제외한 나머지 섹션에 배경색을 설정 */
.container section:not(.contact){
/* black mode */
/* background: rgba(0, 0, 0, .3); */ /* 백그라운드에 알파값을 줘도 되지만 mix-blend-mode 를 사용한 것과 조금 다름 */
background-color: #333;
mix-blend-mode: multiply;
color: white;
/* white mode */
/* background: white;
color: black;
mix-blend-mode: screen; */
/* mix-blend-mode: color-dodge; */
/* mix-blend-mode: lighten; */
/* mix-blend-mode: screen; */
}https://hyoni-k.tistory.com/48
mix-blend-mode : 요소를 겹치는 효과
이미지 등의 요소가 겹치는 경우 중첩된 상태를 표시하는 방법에 대해 알아보고자 한다. 포토샵에서 사용하는 블렌드 모드와 유사한데, 이 효과를 css에서도 사용할 수 있다. 서로 다른 요소(ex.
hyoni-k.tistory.com
728x90
'프론트엔드 > 컴포넌트' 카테고리의 다른 글
| 자바스크립트없이 드롭다운 메뉴 만들기 (2) (0) | 2023.04.14 |
|---|---|
| 카드 컴포넌트 및 리뷰 컴포넌트 만들기 (2) (0) | 2023.04.14 |
| 배경이 비취는 투명 텍스트 효과 만들기 (2) | 2023.04.14 |
| 카드 컴포넌트 및 리뷰 컴포넌트 만들기 (0) | 2023.04.13 |
| 자바스크립트 없이 드롭다운 메뉴 만들기 (0) | 2023.04.13 |