-
시스루 배경 만들기프론트엔드/컴포넌트 2023. 4. 14. 17:03728x90
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