CSS背景图像未修复答案

【问题标题】：CSS background-image Not FixedCSS背景图像未修复
【发布时间】：2019-04-24 15:43:06
【问题描述】：

我正在尝试制作一个简单的背景图像，当我向下滚动页面时它会保持原位。背景图像不会留在原地。我已将背景附件设置为固定。

见：www.emergencydatascience.org

我的 CSS 代码：

background-image: url($background_image); 
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: -1;

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

如果有帮助，请提供更多 CSS： https://github.com/dighr/data-flood/blob/gh-pages/_sass/layout/_wrapper.scss

【问题讨论】：

不知道为什么，但是当我滚动某些东西时，内联变换矩阵会发生变化。谢谢你的问题
可以从我当前的 CSS 代码中修复吗？
它不是 CSS。如果您在浏览器上禁用 js，它可以正常工作。似乎某些脚本正在模拟视差效果。可能是某个库之类的，您是否实现了控制视差的东西？
在这里查看 @RichardTrinh emergencydatascience.org/assets/js/main.js 注释掉 $bg 代码，看看它是否特别适用于这一行 $bg.css('transform', 'matrix(1,0,0,1,0 ,' + (pos * 强度) + ')');
如@DylanAnlezark 所说，打开开发工具并在 main.js 中搜索“视差”。

标签： css background-image background-attachment

【解决方案1】：

将 .bg 类移动到身体开始之后。你的#wrapper 和 .bg 设置很奇怪

<body class="is-loading">
   <div class="bg"></div>
    <!-- Wrapper -->
        <div id="wrapper" class="fade-in">

            <!-- Intro -->
                <div id="intro">
                    <h1 class="main-heading">Emergency Data Science</h1>
                    <h2 class="main-heading">Taking Advantage of the Data Flood</h2>
                    <p class="main-heading"><b>December 4 - 5, 2018 8:30AM - 5:00PM | Toronto</b></p>
                </div>

我在这里制作了结果的屏幕视频。

https://www.useloom.com/share/f0c19c45ff9b421e903632157b0add64

【讨论】：

您的 main.js 文件中有一些视差设置，但我认为这些不是问题。
谢谢，但我如何摆脱图像底部的空白空间？我试过高度：100vh 和宽度：100vw 或高度：100% 和宽度：100%。图片在 100vh 和 100vw 时更好。图片只是放大到 100%。
你能张贴你看到的截图吗？我没有看到空格。这就是我看到的……https://imgur.com/a/CPSEKwS
你好，在包装器之前添加 bg div 仅在我在本地运行时才有效。当我访问 www.emergencydatascience.org 时，问题仍然存在。另外，这是我所说的底部：ibb.co/cmjkfV
奇怪的是我的云端很好，但我的 route53 不好。它们都是相同的代码：d3s44ff9bo8gsz.cloudfront.net emergencydatascience.org 当我在我的 macbook 上查看它时，它似乎一切正常，但对于任何其他计算机，它似乎都坏了