избледняване на корицата на размера на фона без преход на размера

Имам div, където променям фона (с помощта на jQuery). Тези правила на CSS3 позволяват на новото фоново изображение да преминава добре

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

Проблемът е, че размерът на фона също се променя.

Така че, ако превключи от портретно към пейзажно фоново изображение, например, докато избледнява, изображението се смачква вертикално и след това се разтяга хоризонтално. Това може да е малко гадно.

Има ли някакъв начин да се използва background-size: cover, но само да се избледнее прехода на самото фоново изображение без размера на фона?


css background-image css-transitions background-size
person andrewtweber    schedule 19.08.2014    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Това е просто... странно. background-image не трябва да бъде анимируем на първо място. На от друга страна, background-size могат да бъдат анимирани, но от вашия CSS е много ясно, че не искате да преминете към background-size. И все пак браузърът ви избира да го анимира заедно с изображението.

Каквото и да прави браузърът ви, той очевидно пренебрегва спецификацията и просто си върши работата. Тъй като background-image не може да се анимира чрез CSS (знам, че Firefox и IE не го поддържат) и вашият фонов преход така или иначе вече се обработва с jQuery, предлагам да използвате jQuery вместо CSS, за да приложите кръстосаното избледняване, за да сте сигурни, че ще работи последователно в браузърите.

person BoltClock    schedule 19.08.2014
comment
Той е в Chrome 36.0.1985 на Windows. Само аз ли съм, или Chrome прави точно това, което направи IE (въвеждайки несъвместими странности, които поддържа само техният браузър), но този път се измъква? - person andrewtweber; 19.08.2014
comment
@andrewtweber: Не само ти. ;) - person BoltClock; 19.08.2014
comment
И сега, през 2021 г., Firefox поддържа анимиране на background-image и не страда от разтягане на изображението по време на преливане, както все още прави Chrome. - person Corey; 30.01.2021

arrow_upward
2
arrow_downward

Заобиколих анимацията с нежелан размер чрез:

  1. с два div, абсолютно разположени един върху друг

  2. промяна на тяхната непрозрачност (напр. едното до 0, а другото до 1)

  3. поставяне на css прехода върху непрозрачността, а не върху фоновото изображение.

Това постига кръстосано избледняване между фоновите изображения на divs. Ако имате повече от 2 изображения за цикъл, или използвайте повече divs, или променете фоновото изображение на това, за което задавате непрозрачност на 1.

person Jon N    schedule 08.09.2017