исчезновение фоновых изображений с помощью css3

Привет всем... Мне интересно, почему это не сработает?

.right-article.boy {
    background: transparent url(../images/boxes-bg/boy.jpg) left top no-repeat;
    width: 413px;
    height: 242px;
    -webkit-transition: background 1.5s linear;
    -moz-transition: background 1.5s linear;
    transition: background 1.5s linear;
}

.right-article.boy:hover {
    background: transparent url(../images/boxes-bg/boy-hover.jpg) left top no-repeat;
}

Если я изменю фон на такие цвета, как желтый, а при наведении на черный, все будет работать нормально .... Но не с моими изображениями?


person Community    schedule 10.05.2011    source источник


Ответы (2)


Взгляните на http://css3.bradshawenterprises.com/cfimg/ — я написал это руководство для помогите людям с такими проблемами!

person Rich Bradshaw    schedule 10.05.2011
comment
Правильно, это не соревнование, но думал, что спектр информации поможет. Кстати, я проголосовал за вас перед публикацией. - person Rich Bradshaw; 10.05.2011

я не могу представить, как изменится изображение за 1,5 секунды.
я бы сделал это немного по-другому:
http://jsfiddle.net/seler/48BM4/1/ или http://jsfiddle.net/seler/48BM4/2/

с изображениями это будет работать так: http://jsfiddle.net/seler/48BM4/3/

другой пример с автоматической высотой и отсутствием необходимости дублировать содержимое:
http://jsfiddle.net/seler/48BM4/7/

person seler    schedule 10.05.2011
comment
Это именно то, о чем ОП упоминал выше. Он работает с цветом фона, но не с изображением. - person anothershrubery; 10.05.2011
comment
@anothershrubery тот факт, что в первом примере я не использовал изображение, не означает, что он не будет работать с изображениями. см. третий пример - person seler; 10.05.2011
comment
Третий пример с использованием изображений не работает, о чем просит ОП. Кроме того, вы должны опубликовать соответствующий код, который отвечает на вопрос в вашем ответе. - person Josh; 26.02.2013