배경이 투명한 이미지에서 삽입 상자 그림자가 사라지는 이유는 무엇입니까?

Barbara Streisand

풀어 주다： 2024-10-30 00:48:02

원래의

913명이 탐색했습니다.

Why Does Inset Box-Shadow Disappear Over Images with Transparent Backgrounds?

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

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

보이지 않는 그림자의 경우

원래 질문에 제공된 예를 고려하세요.

<code class="css">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%;
}</code>

로그인 후 복사

<code class="html"><main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main></code>

로그인 후 복사

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

이미지 투명성의 문제

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

투명도 장벽 극복

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

아래 업데이트된 CSS 스니펫에서 :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>

로그인 후 복사

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

위 내용은 배경이 투명한 이미지에서 삽입 상자 그림자가 사라지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：CSS ::after Pseudo-element를 사용하여 호버에서 콘텐츠를 동적으로 변경하는 방법은 무엇입니까? 다음 기사：앵커 태그만으로 CSS 스크롤 애니메이션을 트리거할 수 있나요?

본 웹사이트의 성명

저자별 최신 기사

에서 2024-04-29 11:01:01

2194

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2341