理解为什么纯CSS视差效果在div标签中有效，而在body标签中无效？

Question

我正在尝试理解Keith Clark在他的网站文章中演示的纯CSS视差效果。请参考链接：这篇文章。

看这两个jsFiddles：使用div的CSS视差和使用body的CSS视差。

第一个可以按预期工作，而第二个则不能 - 没有视差效果发生。这两个文档之间唯一的区别是第一个缺少一个名为 div.parallax 的中间标签，带有以下属性：

.parallax {
      perspective: 1px;
      height: 800px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color:rgba(0,0,0,0.25);
 }

第二个代码段移除了这个标签，并将上述样式添加到body中：

body {
      perspective: 1px;
      height: 800px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color:rgba(0,0,0,0.25);
 }

有人能告诉我为什么会出现这种情况吗？为什么我需要在文档中添加一个看似多余的标签才能实现这种效果？为什么 body 元素不能作为 div.parallax 容器元素？

- marked-down

---

你真的应该将CSS放在jsFiddle的CSS面板中，并删除样板标记，否则在所有内容都是一个自包含HTML文档时，在那里托管代码就毫无意义了。 - BoltClock

Answer 1

这是因为 body 上的 overflow 值被转移至根元素，使得 body 的默认 overflow 值变为 visible，从而破坏了变换效果。请参见规范中的 this section 部分。

在根元素上设置 overflow: hidden 可以防止这种行为，并允许 body 作为容器。

- BoltClock

---

太棒了。谢谢你提供这个。 - calipoop