CSS3에서 배경 이미지에 대한 페이드인/페이드아웃 전환을 어떻게 만들 수 있나요?

CSS3의 이미지 페이드 효과 전환

요소에는 CSS 전환을 사용하여 '페이드인 페이드아웃' 효과를 구현하는 것이 가능하지만 배경 이미지는 어떻습니까?

최근 한 독자가 다음을 사용하여 배경으로 이를 달성하기 위해 고군분투했습니다. CSS:

.title a {
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

텍스트와 같은 요소에 대해 배경 속성에 애니메이션을 적용할 수 없다는 문제가 있었습니다.

해결책은 이 업데이트에서 볼 수 있듯이 배경 이미지 속성을 별도로 전환하는 데 있습니다. CSS:

.title a {
    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}

이미지 페이딩 전환이 가능합니다. 현재 Chrome, Opera 및 Safari는 기본적으로 이 전환을 지원합니다. Firefox와 Internet Explorer는 그렇지 않을 수도 있습니다.

위 내용은 CSS3에서 배경 이미지에 대한 페이드인/페이드아웃 전환을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!