HTML 태그와 절대 위치 지정을 사용하여 jQuery로 희미해지는 배경 이미지를 얻는 방법은 무엇입니까?

배경 이미지 페이딩: jQuery를 사용한 대안적 접근 방식

jQuery의 애니메이션 방법을 사용하여 배경 이미지를 직접 페이드하려는 시도는 소용없을 수 있습니다. 그러나 이 문제에 대한 독창적인 해결책이 있습니다.

배경 이미지를 흐리게 하는 대신 HTML 이미지를 표시하는 태그입니다. 절대 위치 지정(위치:절대) 및 음수 Z-색인(z-색인:-1)에 CSS 규칙을 적용하면 이러한 이미지는 다른 요소 뒤에 남아 있으면서도 배경 이미지를 모방할 수 있습니다.

이 설정을 사용하면 다음과 같은 작업을 수행할 수 있습니다. 이미지에 jQuery의 페이드 효과를 활용하여 원하는 배경 페이딩 효과를 만듭니다. 다음은 설명할 예입니다.

HTML:

<code class="html"><img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="HTML 태그와 절대 위치 지정을 사용하여 jQuery로 희미해지는 배경 이미지를 얻는 방법은 무엇입니까?" >
<img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="HTML 태그와 절대 위치 지정을 사용하여 jQuery로 희미해지는 배경 이미지를 얻는 방법은 무엇입니까?" ></code>

CSS:

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

jQuery :

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

이 스크립트는 이미지를 하나씩 페이드하여 다양한 배경 사이를 부드럽게 전환합니다.

라이브 데모:

이 기술의 실제 데모를 보려면 http://jsfiddle.net/RyGKV/를 방문하세요.

위 내용은 HTML 태그와 절대 위치 지정을 사용하여 jQuery로 희미해지는 배경 이미지를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!