css에서 div 요소를 겹치지 않고 배경 이미지를 투과하는 방법

안녕하세요! 사쿠입니다!

웹 제작을 하면

"배경 이미지를 투과하고 싶다"라든지 "배경을 얇게하고 싶다!"

라고 하는 시츄에이션에 많이 조우한다고 생각합니다만, google 선생님에게 방법을 물으면 「div 요소를 거듭해 위로부터 투과 레이어를 곱한다」라고 하는 중복의 방법이 산견됩니다.

background-image는 요소가 아니므로 opacity는 적용되지 않습니다. 따라서 여기에서는 blend-mode를 활용합니다.

샘플

css-lighten-sample

background-image: url("room_syosai.png");
background-color: rgba(255, 255, 255, 0.8);
background-blend-mode: lighten;

결과


css-darken-sample

background-image: url("room_syosai.png");
background-color: rgba(0, 0, 0, 0.6);
background-blend-mode: darken;

결과


blend-mode는 사전에 준비된 배경색 또는 배경 이미지를 효과를 주어 합성하는 기능입니다.
단 3행으로 배경 투과를 실현할 수 있었습니다. div 요소를 사용해 ~보다는 훨씬 더 적은 행수로 원하는 결과를 얻을 수 있었을까 생각합니다.

또 blend-mode에는 그 밖에도 십수 종류의 블렌드 방식이 존재합니다
blend-mode에 대해 자세히 알아보기

HTML 빠른 참조
h tp // w w. htmq. 이 m/cs/바 ckg 로운 d b ぇ ン d도. shtml

그라데이션

blend-mode와는 다르지만 그라데이션을 겹치는 방법도 소개하고 싶습니다.

css-gradation-sample

background: linear-gradient(315deg, rgba(250, 68, 101, 0.6), rgba(105, 188, 200, 0.6)) ,url(room_syosai.png);

linear-gradient를 사용하여 단 한 줄로 이미지에 그라데이션을 곱할 수있었습니다.

linear-gradient에 대해 자세히 알아보기

MDN web docs님
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / u b / Cs / ぃ 네 rg 등 t

마지막으로

간단하게 배경 이미지를 투과하는 방법을 소개했습니다. 두 기능 모두 디자인면의 검증을 할 때의 기능입니다.
여러분의 web 개발의 도움이 되면 다행입니다!

twitter→( @saku_nectaris )
팔로우 잘 부탁해!