prekrytie veľkosti pozadia - prechod bez veľkosti prechodu - css, css3, pozadie-obrázok, css-prechody, veľkosť pozadia

Mám div, kde mením pozadie (pomocou jQuery) .Tieto pravidlá CSS3 umožňujú, aby sa nový obrázok na pozadí dostatočne prekrížil

transition: background-image 1s ease-in-out;
background: center center no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;

Problémom je, že veľkosť pozadia je tiež prechod.

Takže ak sa prepne z portrétu na obrázok na pozadí krajiny, napríklad pri zatienení sa obraz stočuje vertikálne a potom sa natiahne horizontálne. To môže byť trochu nepríjemné.

Existuje nejaký spôsob použitia background-size: cover ale len preblednúť prechod samotného pozadia bez veľkosti pozadia?

odpovede:

To je ... divné. background-image nie je predovšetkým potrebné animovať. Na druhej strane, background-size môcť byť animovaný, ale z vášho CSS je veľmi jasné, že vy don "t chcete prechod background-size, Váš prehliadač sa však rozhodne animovať spolu s obrázkom.

Bez ohľadu na to, čo váš prehliadač robí, samozrejme ignoruje špecifikáciu a len robí svoju vlastnú vec background-image nie je animovateľný pomocou CSS (viem Firefox a IEnepodporujte to) a prechod na pozadí sa už s jQuery zaobchádza. Navrhujem používať jQuery namiesto CSS na implementáciu crossfade, aby sa zabezpečilo, že bude pracovať konzistentne v prehliadačoch.

Pracoval som okolo neúmyselného animácie veľkosti:

1. majú dve divs, absolútne umiestnené na seba nad sebou

2. cyklovanie ich opacity (napr. jeden na 0 a druhý na 1)

3. čím sa css prechod na neprístupnosť, skôr než pozadie-image.

Tým sa dosiahne vzájomné prepätie medzi pozadímobrazy divov. Ak máte viac ako 2 obrázky na cyklus, použite viac divov alebo zmeníte obrázok na pozadí toho, ktorý nastavíte nepriehľadnosť na hodnotu 1.