Эффект 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?

Благодаря!

    Вы не можете переходить между двумя фоновыми изображениями, так как браузер не знает, что вы хотите интерполировать. Как вы обнаружили, вы можете перейти к исходной позиции. Если вы хотите, чтобы изображение затухало при наведении мыши, я думаю, что лучший способ сделать это с помощью 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); } 

    Эффект прокрутки является причиной, определяя общее свойство «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; } 

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

     
  • и т.д…

    Где

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

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

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

    Давайте будем гением компьютера.