4

背景を変更する 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背景サイズなしで背景画像自体をフェードトランジションするだけで使用する方法はありますか?

4

2 に答える 2

1

それはただ... 奇妙です。background-imageそもそもアニメーション化できるはずがありません。一方、はアニメーション化background-size できますが、CSSから遷移したくないbackground-sizeことは明らかです。それでも、ブラウザはとにかく画像と一緒にアニメーション化することを選択します.

ブラウザが何をしていても、明らかに仕様を無視して独自のことを行っています。background-imageCSS を使用してアニメーション化することはできません (Firefox と IE がサポートしていないことは知っています)。また、背景の遷移はとにかく jQuery で処理されているため、CSS の代わりに jQuery を使用してクロスフェードを実装し、一貫して動作することを確認することをお勧めします。ブラウザー間で。

于 2014-08-19T06:20:07.243 に答える