Transizione dell'immagine di sfondo CSS3


122

Sto cercando di creare un effetto di "dissolvenza in apertura" utilizzando la transizione CSS. Ma non riesco a farlo funzionare con l'immagine di sfondo ...

Il CSS:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}​

Dai un'occhiata: http://jsfiddle.net/AK3La/

Risposte:


104

Puoi effettuare la transizione background-image. Usa il CSS di seguito imgsull'elemento:

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

Questo è supportato nativamente da Chrome, Opera e Safari. Firefox non lo ha ancora implementato ( bugzil.la ). Non sono sicuro di IE.


106
background-imagenon è una proprietà animabile ( w3.org/TR/css3-transitions/#animatable-properties ), quindi la tua soluzione non è conforme agli standard.
TLindig

12
Questa non è una soluzione - FF e IE non lo supportano e, come notato sopra, non è una proprietà che le specifiche dicono dovrebbero essere supportate.
Sentinel

Vedi anche per lo sviluppo corrente in Fx: bugzilla.mozilla.org/show_bug.cgi?id=546052
Volker E.

2
@TLindig Dovrebbe essere una proprietà animabile.

3
La proprietà animabile è background, e questo è ciò che dovrebbe essere usato (funziona in Chrome per me). Forse la specifica (o l'impl) è cambiata da quando è stata pubblicata la domanda
fps

37

La soluzione (che ho trovato da solo) è un trucco ninja, posso offrirti due modi:

per prima cosa devi creare un "contenitore" per <img>, conterrà stati normali e al passaggio del mouse allo stesso tempo:

<div class="images-container">
    <img src="http://lorempixel.com/400/200/animals/9/">
    <img src="http://lorempixel.com/400/200/animals/10/">
</div>

Fondamentalmente, devi nascondere lo stato "normale" e mostrare il loro "passaggio del mouse" quando lo passi

e questo è tutto, spero che qualcuno lo trovi utile.


Bella soluzione. Durante la sperimentazione con il primo campione, ho notato che se aumenti la durata della transizione a 4 secondi, puoi vedere un salto molto evidente quando lo z-index cambia nel mezzo della transizione. Almeno su Chrome 35, puoi spostare i tempi dell'interruttore z-index e pulire la transizione modificando il valore della proprietà in "all 4s easy , z-index 1ms" ( jsfiddle.net/eD2zL/330 ).
Neal Stublen

2
@NealS. hai ragione. Questa risposta è vecchia di 2 anni, rimuoverei z-index, sembra inutile. Le immagini devono solo essere in ordine.
Ruffo

Molte grazie. La tua soluzione è molto utile per me.
Slam

È possibile il "caricamento lento" se utilizzo questa soluzione?
Daniel

16

Ho trovato una soluzione che ha funzionato per me ...

Se hai una voce di elenco (o div) contenente solo il link, e diciamo che questo è per i link sociali sulla tua pagina a Facebook, Twitter, ecc. e stai usando un'immagine sprite puoi farlo:

<li id="facebook"><a href="facebook.com"></a></li>

Rendi lo sfondo di "li" la tua immagine del pulsante

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}

Quindi imposta l'immagine di sfondo del link nello stato al passaggio del mouse del pulsante. Aggiungi anche l'attributo opacity a questo e impostalo su 0.

#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
}

Ora tutto ciò di cui hai bisogno è "opacity" sotto "a: hover" e impostalo su 1.

#facebook a:hover {
   opacity:1;
}

Aggiungi gli attributi di transizione dell'opacità per ogni browser a "a" e "a: hover" in modo che il css finale avrà un aspetto simile a questo:

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}
#facebook a:hover {
   opacity:1;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

Se ho spiegato correttamente che dovrebbe farti avere un pulsante dell'immagine di sfondo in dissolvenza, spero che almeno aiuti!


3
Ne ho anche realizzato una versione video tutorial. youtube.com/watch?v=6ieR5ApVpr0
Austin Parrish Thomas,

Non dovresti, AFAIK, aver bisogno di specificare le transizioni sulla pseudoclasse hover; la definizione di transizione per il tipo di tag di ancoraggio porterà avanti il ​​comportamento al passaggio del mouse, tutto ciò che devi modificare è l'opacità. Tieni presente che questo esempio funziona bene perché gli stili vengono applicati direttamente a ID / tipi di tag; se lo fai con le classi, devi assicurarti di non aggiungere e rimuovere la classe con la transizione definita.
KeithS


13

Puoi usare lo pseudo elemento per ottenere l'effetto che desideri come ho fatto io in quel violino .

CSS:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    position: relative;
}
.title a:after {
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    content: "";
    opacity: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    /* TRANSISITION */
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{   
    opacity: 1;
}

HTML:

<div class="title">
    <a href="#">HYPERLINK</a>
</div>

2
Funziona benissimo, ma potresti incorrere in 2 problemi: 1) se non vedi l' :afterelemento, prova a impostarlo widthe heightcome 100%invece di inherit, 2) se il background-imageè effettivamente visualizzato in primo piano , usa l'indice negativo per l' :afterelemento:z-index: -1;
Radek Pech

9

Se puoi usare jQuery, puoi provare il plugin BgSwitcher per cambiare l'immagine di sfondo con effetti, è molto facile da usare.

Per esempio :

$('.bgSwitch').bgswitcher({
        images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
        effect: "fade",
        interval: 10000
});

E aggiungi il tuo effetto, vedi come aggiungere un tipo di effetto


Grazie, ho risolto il problema con l'animazione della modifica dello sfondo della tabella con l'uso di questo plugin.
userlond

4

Prova questo, renderà lo sfondo animato funzionante sul web ma l'app mobile ibrida non funzionerà

@-webkit-keyframes breath {
 0%   {  background-size: 110% auto; }
 50%  {  background-size: 140% auto; }
 100% {  background-size: 110% auto; }      
}
body {
   -webkit-animation: breath 15s linear infinite;
   background-image: url(images/login.png);
    background-size: cover;
}

4

Considerando che le immagini di sfondo non possono essere animate, ho creato un piccolo mixin SCSS che consente la transizione tra 2 diverse immagini di sfondo utilizzando pseudo selettori prima e dopo . Sono a livelli z-index diversi. Quello che è più avanti inizia con opacità 0 e diventa visibile con il passaggio del mouse.

Puoi usarlo con lo stesso approccio anche per creare animazioni con gradienti lineari.

SCSS

@mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){  
  position: relative;  
  z-index: 100; 
  &:before, &:after {
    background-size: cover;  
    content: '';    
    display: block;
    height: 100%;
    position: absolute;
    top: 0; left: 0;    
    width: 100%;    
    transition: opacity $transTime;
  }
  &:before {    
    z-index: -101;
    background-image: url("#{$bkg1}");    
  }
  &:after {    
    z-index: -100;
    opacity: 0;
    background-image: url("#{$bkg2}");    
  }
  &:hover {
     &:after{
       opacity: 1; 
     }
  }  
}

Ora puoi semplicemente usarlo con

@include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");

Puoi verificarlo qui: https://jsfiddle.net/pablosgpacheco/01rmg0qL/


Soluzione molto bella! Mi ha dato una migliore comprensione di come fare un buon uso degli stati elemento ': prima' e ': dopo' come bonus :-)
joronimo

3

Se l'animazione opacitynon è un'opzione, puoi anche animare background-size.

Ad esempio, ho usato questo CSS per impostare un backgound-imagecon un ritardo.

.before {
  background-size: 0;
}

.after {
  transition: background 0.1s step-end;
  background-image: $path-to-image;
  background-size: 20px 20px;
}

Se si desidera un effetto fade-out da .afterin .beforeper l'immagine di sfondo, è necessario impostare l'immagine di sfondo in .before. Altrimenti scomparirà semplicemente senza animazione.
Radek Pech

2

Salam, questa risposta funziona solo in Chrome, perché IE e FF supportano la transizione del colore.

Non è necessario creare i tuoi elementi HTML opacity:0, perché a volte contengono testo e non c'è bisogno di raddoppiare i tuoi elementi !.

La domanda con il collegamento ad un esempio in jsfiddle aveva bisogno di un piccolo cambiamento, che è quello di mettere un'immagine vuota .title acome background:url(link to an empty image);stesse lo metti in .title a:hoverma rendono un'immagine vuota, e il codice funzionerà.

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
  }
  .title a:hover{   background: transparent;
   background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}

Dai un'occhiata a https://jsfiddle.net/Tobasi/vv8q9hum/


Ancora non funziona su Fire Fox o IE :(, ma sembra a posto con Chrome
Mohammed Suleiman,

1

Con il post stimolante di Chris qui:

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

Sono riuscito a trovare questo:

#banner
{
    display:block;
    width:100%;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-image:url(../images/image1.jpg);
    /* HOVER OFF */
    @include transition(background-image 0.5s ease-in-out); 

    &:hover
    {
        background-image:url(../images/image2.jpg);
        /* HOVER ON */
        @include transition(background-image 0.5s ease-in-out); 
    }
}


0

Stavo lottando con questo per un po ', prima ho usato una pila di immagini una sopra l'altra e ogni tre secondi, stavo cercando di animare l'immagine successiva nella pila e gettando l'immagine corrente in fondo alla pila. Allo stesso tempo stavo usando le animazioni come mostrato sopra. Non riuscivo a farlo funzionare per la vita di me.

Puoi utilizzare questa libreria che consente di ** un'immagine di sfondo ridimensionata in modo dinamico e compatibile con la presentazione ** utilizzando jquery-backstretch.

https://github.com/jquery-backstretch/jquery-backstretch

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.