배경 위에 또다른 배경을 깔고 싶을 때 css 방법 (html 요소 사이에 레이어 추가)

박스마다 각기 다른 배경 이미지를 넣었는데, 이 배경 이미지가 호버될 때마다 명암을 달리 주고 싶어졌다.

다시 이미지를 수정해서 집어넣기도 귀찮았고, 호버되려면 이미지를 추가할 것이 아니라 css 효과를 집어넣어야 하므로.

css로 조절할 수 있는 방법을 찾아야 했다.

예시)

요렇게 핑크색 박스(div class="pink") 안에 배경(h1)이라는 텍스트와 파란색 또다른 상자(div class="blue") 콘텐츠가 들어있다.

핑크색 배경 이미지 위로 레이어를 하나 더 깔아서 효과를 주고 싶었다.

 

빗금친 영역을 추가하기 위해 .pink에 가상연산자를 잡아서 스타일을 줬다.

.pink:before{content:""; width: 100%; height: 100%; position: absolute; top:0; left:0; background: rgba(0,0,0,.5)}

 

그랬더니만 핑크색 박스 전체 영역 위로 떠버려서 배경+파란색 상자까지 덮어버렸다.

이럴 때 유용하게 쓰이는 것은 레이어에 인덱스값을 붙여서 보여지는 순서를 정하게 해주는 z-index!

 

앞으로 먼저 보여지고 싶은 영역인 h1와 .blue의 z-index 값을 높여도 되지만,

콘텐츠가 이것보다 더 많을 때는 일일이 주기도 귀찮고...

이럴 때는 pink의 z-index 값에 마이너스를 준다. 각 영역의 z-index 디폴트값은 0 이므로 -1만 주더라도 핑크는 순서가 뒤로 밀려난다. 그리고 pink의 가상연산자 before의 z-index 값도 -1

 

.pink{.... z-index: -1}

.pink:before{.... z-index: -1}

.pink:hover{z-index: 0}

 

호버될 때 z-index값을 0으로 만들면 호버할 때마다 배경이 생겼다가 사라졌다가 한다.

포토샵의 레이어 개념을 이해하고 있으면 html과 css 다루기도 쉬운 것 같다.