CSS3 전환으로 그라데이션 배경 강화

Question

CSS를 사용하여 썸네일에 전환을 만들어 마우스를 올리면 배경이 페이드 인되도록 하려고 합니다. 변환이 작동하지 않지만 rgba() 값으로 변경하면 아름답게 작동합니다. 그라디언트를 지원하지 않습니까? 또한 이미지를 사용해 보았는데 이미지도 변환되지 않습니다.

다른 포스팅에서 누군가가 했기 때문에 가능하다는 것은 알지만, 정확히 어떻게 되었는지는 모르겠습니다. 어떤 도움이라도> 사용할 수 있는 CSS는 다음과 같습니다.

으아아아

Answer 1

한 가지 해결책은 배경 위치를 변환하여 그라데이션 변경 효과를 만드는 것입니다. http://sapphion.com/2011/10/css3-그라디언트 전환 및 배경 위치/

으아악 으아악

Answer 2

그라디언트는 아직 전환을 지원하지 않습니다(현재 사양에서는 보간을 통해 그라데이션과 유사한 전환을 지원해야 한다고 나와 있지만).

배경 그라데이션으로 페이드인 효과를 원하는 경우 컨테이너 요소에 불투명도를 설정하고 불투명도를 "전환"해야 합니다.

(그라디언트 전환을 지원하는 일부 브라우저 버전이 이미 있습니다(예: IE10. 2016년에 IE에서 그라데이션 전환을 테스트했는데 당시에는 작동하는 것처럼 보였지만 내 테스트 코드는 더 이상 작동하지 않습니다.)

업데이트 날짜: 2018년 10월 접두사[예: Radial-gradient(...)]가 없는 새로운 구문을 사용한 그라데이션 전환이 이제 Microsoft Edge 17.17134에서 작동하는 것으로 확인되었습니다. 언제 추가됐는지 모르겠네요. 최신 Firefox 및 Chrome/Windows 10에서는 여전히 작동하지 않습니다.

업데이트 날짜: 2021년 12월 @property 해결 방법은 이제 최신 Chromium 기반 브라우저에서 작동하지만 Firefox에서는 작동하지 않습니다. 아래(또는 위의 YMMV) @mahozad의 답변 을 확인하고 투표하세요.