переход на фоновое изображение в firefox?

Я пытаюсь найти альтернативу этому:

"transition:background-image 1s whatever"

на в Firefox поскольку он работает только в браузерах webkit.

Я уже пробовал альтернативу непрозрачности, но это не вариант для меня, так как у меня есть контент в фоновом контейнере, который исчезнет вместе с фоном при использовании непрозрачности.

спасибо.

6
css css3 firefox html

3 ответов

вы можете сделать это, используя 2 псевдо-элементы

в CSS

.test
{
    width: 400px;
    height: 150px;
    position: relative;
    border: 1px solid green;
}

.test:before, .test:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 1;
}
.test:before {
    background-color: red;
    z-index: 1;
    transition: opacity 1s;
}

.test:after {
    background-color: green;
}

.test:hover:before {
    opacity: 0;
}

возиться с реальными изображениями

(наведите курсор на переход)

чтобы видеть содержимое div, псевдо-элементы должны быть в отрицательном z-индексе:

возиться с исправленным z-индексом

похоже, IE не вызовет это наведение

.test:hover:before {
    opacity: 0;
}

но вызовет этот

.test:hover {
}
.test:hover:before {
    opacity: 0;
}

(как глупо, как это кажется)

скрипка для IE10

11

Он работает

вы можете увидеть его здесь:http://dabblet.com/gist/1931619

но, по-видимому, Firefox еще не реализовал его.

-1
#id_of_element {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

это не сделать? Просто нужно изменить все на background-image.

-1