CSS3 Fade Effect

Question

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; 
} 

.. obecnie ma efekt przewijania w górę/w dół, ale chcę, aby tło zmieniało się wraz z efektem zanikania, co powinienem zmienić w CSS?

Dzięki!

Answer 1

Nie można przejść między dwoma obrazami tła, ponieważ przeglądarka nie ma możliwości sprawdzenia, co chcesz zinterpretować. Jak odkryłeś, możesz zmienić pozycję tła. Jeśli chcesz, aby obraz pojawiał się przy użyciu myszki, myślę, że najlepszym sposobem zrobienia tego przy przejściach CSS jest umieszczenie obrazu na elemencie zawierającym, a następnie animacja koloru tła na przezroczystym w samym łączu:

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); 
} 

Answer 2

jest to możliwe, skorzystaj z poniższego strukturę:

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

etc ...

Jeżeli <li> zawiera znacznik <a> kotwicy, która zawiera zakres, jak pokazano powyżej. Następnie wstawić następujący CSS:

• LI dostać position: relative;
• Daj <a> oznaczyć height, width
• zestaw <span>width & height do 100%, tak że zarówno <a> i <span> mają takie same wymiary
• Both <a> i <span> uzyskać position: relative;.
• przypisać ten sam obraz tła do każdego elementu
• <a> tag będzie miał „OFF” background-position, a <span> będzie miał „ON” background-poisiton.
• Dla 'OFF' Użyj stan zadymienia 0 dla <span>
• Do 'On' :hover członkowskie Zastosowanie nieprzejrzystości 1 do <span>
• Ustaw przejście -webkit lub -moz na elemencie <span>

Musisz możliwość użycia efektu przejścia, ale nadal domyślnie zmienia się stara zamiana background-position. Nie zapomnij wstawić filtru IE alfa.

Answer 3

Efekt przewijania jest przyczyną, określając ogólną właściwość "tła" w pliku CSS zamiast bardziej szczegółowego obrazu tła. Ustawiając właściwość tła, animacja przejdzie pomiędzy wszystkimi właściwościami. Tło-Kolor, Obraz-tła, Pozycja-tła. Etc Powoduje efekt przewijania.

E.g.

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; 
}