html - GIF 不是全屏浏览器

标签 html css formatting background-image

我在我的 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%;
}

最佳答案

我觉得这行得通

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

关于html - GIF 不是全屏浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57163746/

相关文章:

r - ggplot 主题删除 gtable 中两个图上的 y 轴,保留第三个图

python - chartink.com 网页的网络抓取

java - 如何在桌面应用程序中使用电子邮件的 HTML 模板?

java - [JSoup]如何访问标签内的值

html - 如何不在 img 和标签中复制相同的 base64 图像(例如在灯箱中显示)

css - Bootstrap 导航栏固定在右侧

html - 这是实现响应式设计元素的错误方式吗?

javascript - 使用 CSS 定位鼠标单击的左/右或顶部/底部

c - 了解 sscanf 格式化

python - 给定输入日期作为字符串查找年龄(以天为单位)