2013-01-15 4 views
11

이미지 및 그래디언트가 정의 된 CSS3에 배경 이미지가 있습니다. 또한 클래스가 on_time -> too_late 또는 vise versa에서 변경 될 때 전환을 원합니다.배경 이미지 그래디언트 CSS 전환

그라디언트에서 전환 효과를 얻을 수 없습니다. 이것은 어떻게 든 css3에서 지원됩니까? 그것은 불가능

감사

div.too_late 
{ 
    color: White;   
    background-image: url(../Content/images/uit_white.png), -webkit-linear-gradient(top, #feb233 0%, #f39801 100%);  

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;  
} 

div.on_time 
{ 
    color: #222;   
    background-image: url(../Content/images/uit_black.png), -webkit-linear-gradient(top, yellow 0%, #99ff33 100%);  

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;   
} 

답변

9

배경의 그라데이션에 전환을해야합니다. http://nimbupani.com/some-css-transition-hacks.html 당신은 또한 배경 위치 이동을 사용하여 변화하는 것처럼 보이게 할 수

: 여기 http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

이 비슷한 질문입니다 그러나 당신은 "해킹"로 작동하도록이 링크에 모습을 가질 수 . 당신이 페이드 인 배경 그라데이션 효과를 원하는 경우 설정해야합니다 (사양들이 해야한다고 말했습니다 있지만) Use CSS3 transitions with gradient backgrounds