CSS キーフレームでアニメーション化された背景画像の配置に問題があります。現在、左から右にスライドしてから左に戻る大きな横長の画像です。まるでパノラマを見ているか、部屋の中をぐるぐる回っているかのように感じていただければ幸いです。
私の問題は、大きな画面サイズでうまく機能することですが、1280x600 などでは天井のビューしか得られません。従来の背景画像の場合と同じように、背景画像を中央または下からロードするように配置する方法はありますか?
背景画像のコードのサンプルを次に示します。
.sliding-background {
@media screen and (min-width: @screen-lg-min) {
background: url("http://frontier.websitewelcome.com/~eventcen/images/meeting-room-pano-lg.jpg") repeat-x;
height: 100%;
width: 4314px;
animation: slide-lg 30s linear infinite;
}
}
@keyframes slide-lg{
/* do I need to put something here? maybe 100% on the y-axis */
0% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(-1757px, 0, 0); }
100% { transform: translate3d(0, 0, 0); }
}