그라데이션 배경과 함께 CSS3 전환 사용

Question

CSS를 사용하여 마우스 오버 시 썸네일에 전환을 만들어 마우스를 올리면 배경이 페이드 인되도록 하려고 합니다. 변환이 작동하지 않지만 rgba()value로 변경하면 제대로 작동합니다. 그래디언트를 지원하지 않나요? 또한 이미지를 사용해 보았는데 이미지도 변환되지 않습니다.

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

#container div a {
  -webkit-transition: 배경 0.2초 선형;
  -moz-transition: 배경 0.2초 선형;
  -o-전환: 배경 0.2초 선형;
  전환: 배경 0.2초 선형;
  위치: 절대;
  너비: 200px;
  높이: 150px;
  테두리: 1px #000 솔리드;
  여백: 30px;
  Z-색인: 2
}

#컨테이너 div a:hover {
  배경: -webkit-gradient(방사형, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

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의 답변 을 확인하고 투표하세요.