CSS에서 WebKit 필터 호버에도 불구하고 스태킹 순서를 유지하는 방법은 무엇입니까?

Webkit 필터 호버의 스택 순서 변경: 스택 컨텍스트 이해

WebKit 필터를 적용할 때 스택 순서와 관련하여 흥미로운 문제가 발생합니다. 이미지 위에서 순서가 예기치 않게 변경됩니다. 다른 사이트 요소를 방해하지 않고 이 문제를 해결하려면 스택 컨텍스트의 복잡성을 자세히 살펴보세요.

스태킹 컨텍스트는 요소가 페이지에 표시되는 순서를 결정합니다. 요소의 스타일 속성에 변환, 오버플로 또는 필터와 같은 특정 값이 포함되면 요소는 새로운 스택 컨텍스트를 생성합니다.

제공된 예에서 WebKit 필터(회색조)가 이미지에 적용되면 스태킹 컨텍스트가 자동으로 설정됩니다. 새로 생성된 이 컨텍스트는 절대 위치의 div(".slide-content")가 이미지 아래에 배치되어 이미지가 숨겨지게 됩니다.

이러한 바람직하지 않은 동작을 방지하고 원래 스택 순서를 유지하려면 다음을 따르세요. 수정된 솔루션:

이 CSS를 교체하세요:

<code class="css">li a:hover img {
  -webkit-filter: grayscale(100%);
}</code>

스태킹 컨텍스트 생성을 방지하는 이 대안으로:

<code class="css">li a:hover img::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  filter: grayscale(100%);
  z-index: -1;
}</code>

의사 요소 활용(: :before) 절대 위치를 사용하여 이미지 아래에 배치하면 새로운 스태킹 컨텍스트를 생성하지 않고도 필터 효과를 효과적으로 시뮬레이션할 수 있습니다. 이 영리한 해결 방법을 사용하면 의도한 스택 순서를 유지하면서 원하는 시각 효과를 얻을 수 있습니다.

위 내용은 CSS에서 WebKit 필터 호버에도 불구하고 스태킹 순서를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!