삽입 상자 그림자를 이미지 위에 렌더링하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

삽입 상자 그림자를 이미지 위에 렌더링하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-04 06:47:01

원래의

1032명이 탐색했습니다.

How to Make Inset Box-Shadows Render Over Images?

Inset Box-Shadow 및 이미지 겹침

inset box-shadow가 있는 컨테이너에 이미지와 텍스트가 모두 포함되어 있는 시나리오에서는 그림자가 그렇지 않은 것처럼 보일 수 있습니다. 이미지 위에 렌더링합니다. 이 문제는 삽입 그림자가 컨테이너 자체에 적용되는 반면 이미지는 컨테이너 내의 별도 요소이기 때문에 발생합니다.

이 문제를 해결하고 원하는 그림자 효과를 얻으려면 :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를 추가하면 이미지 위에 반투명 상자가 생성되어 삽입 그림자가 이미지를 포함한 컨테이너의 전체 영역으로 효과적으로 확장될 수 있습니다.

위 내용은 삽입 상자 그림자를 이미지 위에 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!