수다닷컴

div 배경 이미지를 자동으로 페이드 전환하는 방법

들햇님 2025.03.04 댓글 5

div 배경에 이미지를 몇 장 넣고 페이드 효과로 자동 전환하고 싶어요.
이미지 자체를 바꾸는 방법은 찾았는데, 배경 이미지로 넣은 경우에는 어떻게 구현해야 할지 모르겠네요.
div 하나에 배경 이미지들만 바꿔 가며 보여주고 싶습니다.

댓글 5

  • 앨버트 2025.03.04

    CSS3에서 여러 배경 이미지를 지정할 수는 있지만 배경 자체에 페이드 효과를 주기는 어려워요.
    div 두 개와 overflow:hidden, background-position, jQuery의 animate나 fade 기능을 함께 사용하면 비슷하게 만들 수 있습니다.

  • 큰꽃 2025.03.04

    한곳에 묶은 요소의 위치를 옮기면서 페이드 효과도 줄 수 있나요?
    어떤 식으로 구현하는지 궁금해요.

  • 도란도란 2025.03.04

    배경에 이미지 여러 장을 넣어 전환하는 건 div 하나만으로는 어려워 보여요.
    이미지 수만큼 요소를 만들거나, 이미지 하나에서 위치를 이동시키는 방식을 고려해 보세요.

  • MinA 2025.03.04

    bg1.gif, bg2.gif처럼 이미지가 차례로 페이드되며 바뀌는 기능을 찾고 있어요.
    스크립트를 수정해 쓰긴 하지만 직접 만들 줄 몰라 기본 예제가 필요합니다.

  • 새난 2025.03.04

    배경 이미지를 하나로 합친 뒤 제어하는 방법도 생각해 보세요.
    원하는 방식에 맞춰 직접 테스트해 보셔야 할 것 같아요.