이미지에 대한 삽입 상자 그림자 문제 이해

웹 디자인에서는 삽입 상자 그림자를 사용하여 요소 내에 깊이와 차원을 만드는 것이 일반적인 기술입니다. 그러나 이미지가 포함된 컨테이너를 다룰 때 항상 간단한 것은 아닙니다. 삽입된 상자 그림자가 삽입된 이미지 위에서 사라지는 것처럼 보일 때 문제가 발생합니다.

보이지 않는 그림자의 사례

원래 질문에 제공된 예를 고려하십시오.

body {
  background-color: #000000;
}

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: inset 3px 3px 10px 0 #000000;
}

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

이미지를 포함하여 컨테이너 주위에 삽입 상자 그림자를 적용하는 것이 목표이지만 표시되지 않습니다. 왜 이런 일이 발생하나요?

이미지 투명성 문제

이미지에서 그림자가 사라지는 이유는 투명성에 있습니다. 이미지의 배경이 투명한 경우 이는 기본적으로 배경 요소에 대한 창입니다. 이 경우 컨테이너의 배경은 검은색입니다. 결과적으로 이미지의 투명한 영역에서 삽입된 그림자가 보이지 않게 됩니다.

투명도 장벽 극복

이 문제를 해결하려면 CSS를 사용하는 간단하고 우아한 솔루션을 사용할 수 있습니다. :의사 요소 뒤에. :after 의사 요소를 컨테이너에 추가하면 이미지 위에 배치되고 삽입 상자 그림자를 받는 추가 레이어를 만들 수 있습니다.

아래 업데이트된 CSS 스니펫에서 :after 의사 요소를 적용합니다.

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

이 수정을 통해 이제 삽입 상자 그림자가 이미지의 불투명 영역과 투명 영역 모두에 나타나 원하는 그림자 효과를 제공합니다.