HTML 요소를 사용하여 jQuery로 배경 이미지를 페이드하는 방법

jQuery로 배경 이미지 페이딩

배경 이미지는 웹 페이지나 앱에 시각적 흥미를 더하는 일반적인 방법입니다. 그러나 동적 효과를 만들기 위해 여러 배경 이미지 간에 전환을 원할 수도 있습니다.

일반적으로 jQuery의 fadeIn 및 fadeOut 기능은 배경색이 있는 요소에서만 작동합니다. 이는 각 이미지에 대해 새로운 HTML 요소를 생성하지 않고 배경 이미지를 희미하게 만들 때 문제가 됩니다.

해결책:

이 제한을 극복하기 위한 일반적인 해결 방법은 다음을 사용하는 것입니다. 이미지에 대한 태그를 지정하고 처음에는 display:none을 사용하여 숨깁니다. 음수 Z-인덱스를 사용하여 이미지의 위치를 ​​절대적으로 지정하면 이미지가 배경처럼 작동하도록 만들 수 있습니다. 단계별 해결 방법은 다음과 같습니다.

1. 배경 이미지를 태그:

   <code class="html"><img src="image1.jpg" />
   <img src="image2.jpg" /></code>

2. CSS를 사용하여 이미지 스타일 지정:

   <code class="css">img {
     position: absolute;
     z-index: -1;
     display: none;
   }</code>

3. jQuery를 사용하여 이미지 페이드 인 및 페이드 아웃:

   <code class="javascript">function test() {
     $("img").each(function(index) {
    $(this).hide();
    $(this).delay(3000 * index).fadeIn(3000).fadeOut();
     });
   }
   
   test();</code>

예제 코드:

작동하는 예를 보려면 다음 JSFiddle 링크를 방문하세요.

https://jsfiddle. 넷/RyGKV/

위 내용은 HTML 요소를 사용하여 jQuery로 배경 이미지를 페이드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!