GIF 不是全屏浏览器

Question

我在我的 React 应用程序的背景中显示一个 gif 并且需要它占据整个屏幕，无论屏幕尺寸、浏览器等如何。它在 chrome 上运行完美，但在 safari 上却不行（切断中间屏幕）。这是一个相当大的格式问题，因为这个版本目前正在生产中。如何让 gif 格式正确？

CSS:

.myGradientBackground {
   background-image: url('my_gif.gif');
   background-size:100%;
   background-repeat: no-repeat;
   background-attachment: fixed;
   height:100%;
   width:100%;
}

Answer 1

我认为这行得通

.myGradientBackground {
    background: url('my_gif.gif') no-repeat center center fixed; 
    background-size: cover;
}

GIF 不是全屏浏览器

GIF not fullscreen safari

html

css

formatting

background-image