Inset Box-Shadow가 이미지에 대해 작동하지 않는 이유와 해결 방법은 무엇입니까?

이미지가 겹치지 않는 Inset Box-Shadow: 딜레마 해결

Inset box-shadow는 웹 디자인에 깊이와 강조를 만드는 강력한 도구입니다. 그러나 이미지 위에 적용하면 문제가 발생할 수 있습니다. 이 기사에서는 inset box-shadow가 이미지에 대해 작동하지 않는 이유를 조사하고 CSS :after 가상 요소를 사용하여 솔루션을 제시합니다.

문제

inset box-shadow를 포함하는 컨테이너에 적용할 때 이미지 자체에는 그림자가 나타나지 않을 수 있습니다. 대신 그림자는 컨테이너의 배경에만 영향을 미칩니다. 이는 이미지가 그림자 위에 떠 있는 듯한 착각을 불러일으킬 수 있습니다.

설명

이러한 동작의 이유는 웹 브라우저의 렌더링 메커니즘에 있습니다. 삽입 상자 그림자는 일반적으로 단색 또는 그라데이션인 요소의 배경에 적용됩니다. 이미지가 요소 내에 배치되면 브라우저는 이미지를 자체적인 배경을 가진 별도의 요소로 간주합니다. 결과적으로, 삽입된 상자 그림자는 이미지의 배경에 영향을 미치지 않습니다.

해결책: CSS :after 의사 요소

이 문제를 극복하기 위해 :after 의사 요소를 활용할 수 있습니다. :after 의사 요소를 컨테이너에 추가하고 삽입된 상자 그림자를 적용하면 이미지를 오버레이할 새 레이어를 생성할 수 있습니다.

<code class="css">main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}</code>

이 CSS 코드는 :after 의사 요소를 생성합니다. 컨테이너와 너비와 높이가 동일합니다. 컨테이너 내부에 절대적으로 위치하며 상단에 배치됩니다. 삽입된 상자 그림자는 :after 의사 요소에 적용되어 이미지와 겹치도록 합니다.

위 내용은 Inset Box-Shadow가 이미지에 대해 작동하지 않는 이유와 해결 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!