在 IE 和 Chrome 中创建纯 CSS 平滑视差答案

【问题标题】：Creating pure CSS smooth parallax in IE and Chrome在 IE 和 Chrome 中创建纯 CSS 平滑视差
【发布时间】：2015-12-11 22:19:02
【问题描述】：

我的网站具有使用 HTML 和 CSS 的视差效果。它可以按预期在 Firefox 中运行。运行、流畅且流畅。

我的困境是，当我在 Chrome 和 IE 中测试该功能时，效果会变得不稳定，因此非常刺眼。

我在网上查了一下，只能找到 JQ 和 JS 的修复。有没有办法只使用 CSS 来做到这一点？因为据我所知，没有地方可以演示如何做到这一点。

.slide1 {
    height: 40em;
    background: url(http://www.leejackson.com/wp-content/uploads/2014/03/placeholder.png) center; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

http://codepen.io/anon/pen/NGxBKQ

【问题讨论】：

CodePen 中没有发生视差效果。这只是正常的滚动。
你确定吗？因为它对我来说是可见的。我承认这是我第一次使用 Codepen，所以我可能遗漏了一些明显的东西，尽管我认为不会。
在网页设计中，视差效果是指当您滚动时有两个对象（通常是两个背景平面/对象）以不同的速度相对于彼此移动。在您的 CodePen 中，我只看到正文滚动，而背景是固定的。您所拥有的只是平滑滚动，而不是视差效果。参见dangersoffracking.com 示例：云都在滚动移动，但有些移动得比其他快；那是视差。
我明白这一点。也许这只是一个术语问题或做某事的不同方式会产生相同的效果，但该网站与我有同样的问题。在 IE 中，这种效果看起来很糟糕，几乎坏掉了。在 Firefox 中，它就像口哨一样流畅。
these search results 中的某些内容可能有助于解决您的滚动问题。

标签： html css google-chrome internet-explorer parallax

【解决方案1】：

你的方法是对的，但是某些视差效果是用 javascript 完成的..所以使用它..css 仅用于样式.. javascript 正在做动画

【讨论】：

谢谢。我玩的时间不长，所以我只是主要使用 CSS 来尝试。虽然它可以工作并且做了它应该做的（在一个浏览器中）它对我来说仍然不够好所以也许我认为这是可用的只是错误的。感谢您的意见，也许在不久的将来我开始学习 JavaScript 时会再试一次。
这是一个边缘评论帖子。您应该扩展您的答案以包含更多事实细节。
嘿兄弟，我觉得我的回答对他有帮助……那你为什么要给我减分？不要在意！！ :)