Эффект Fade CSS3 

a {
    float: left;
    width: 32px;
    height: 32px;
    text-align: left;
    text-indent:-9999px;
    background: url('../img/button.png') no-repeat 0 0;

    -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 2s;
    -o-transition: background 300ms ease-in 2s;
    transition: background 300ms ease-in 2s;


    -webkit-transition-property: background;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 100ms;

    -moz-transition-property: background;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 100ms;

    -o-transition-property: background;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 100ms;

    transition-property: background;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 100ms;

}

a:hover {
    background:position: 0 -32px;
}

.. в настоящее время он имеет эффект прокрутки вверх/вниз, но я хочу, чтобы фон изменялся с эффектом затухания, что мне нужно изменить в CSS?

Спасибо!

Ответы

Ответ 1

Вы не можете переходить между двумя фоновыми изображениями, так как браузеру не известно, что вы хотите интерполировать. Как вы обнаружили, вы можете перейти к исходной позиции. Если вы хотите, чтобы изображение затухало при наведении мыши, я думаю, что лучший способ сделать это с помощью CSS-переходов - разместить изображение на содержащем элементе, а затем оживить цвет фона до прозрачного по самой ссылке:

span {
    background: url(button.png) no-repeat 0 0;
}
a {
    width: 32px;
    height: 32px;
    text-align: left;
    background: rgb(255,255,255);

    -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
    }
a:hover {
    background: rgba(255,255,255,0);
}

Ответ 2

Эффект прокрутки является причиной, задав свойство generic "background" в вашем css вместо более конкретного фонового изображения. Установив свойство фона, анимация будет переходить между всеми свойствами. Фоновый цвет, Фоновое изображение, Фоновая позиция и т.д. Таким образом, эффект прокрутки.

например.

a {
-webkit-transition-property: background-image 300ms ease-in 200ms;
-moz-transition-property: background-image 300ms ease-in 200ms;
-o-transition-property: background-image 300ms ease-in 200ms;
transition: background-image 300ms ease-in 200ms;
}

Ответ 3

Возможно, используйте следующую структуру:

<li><a><span></span></a></li>
<li><a><span></span></a></li>

и т.д...

Где <li> содержит тег привязки <a>, который содержит диапазон, как показано выше. Затем вставьте следующий css:

  • LI get position: relative;
  • Отдать <a> тег a height, width
  • Установите <span> width и height на 100%, так что обе <a> и <span> имеют одинаковые размеры
  • Оба <a> и <span> получают position: relative;.
  • Назначить одно и то же фоновое изображение для каждого элемента Тег
  • <a> будет иметь "OFF" background-position, а <span> будет иметь 'ON' background-poisiton.
  • Для состояния "ВЫКЛ" используйте непрозрачность 0 для <span>
  • Для 'ON' :hover используется непрозрачность состояния 1 для <span>
  • Установите переход -webkit или -moz в элемент <span>

У вас будет возможность использовать эффект перехода, но по-прежнему не выполняет старую подкачку background-position. Не забудьте вставить IE-альфа-фильтр.