html - 了解为什么纯 CSS 视差效果适用于 div，但不适用于 body 标签？

Question

我试图理解 Keith Clark 在他的网站上演示的纯 CSS 视差效果 in this article .

使用这两个 jsFiddle:CSS Parallax with div和 CSS Parallax with body .

第一个像描述的那样工作，第二个没有 - 并且没有出现视差效果。这两个文档之间的唯一区别是第一个文档缺少具有以下属性的中间 div.parallax 标记:

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

而第二个删除此标记并将上述样式添加到正文中:

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

谁能告诉我为什么会这样？为什么我的文档中需要一个看似多余的标签才能产生这种效果？为什么 body 元素不能充当 div.parallax 容器元素？

Answer 1

这是因为 body 上 overflow 的值被转移到根元素，使 body 具有默认的 overflow: visible 并破坏了转换。参见 this section规范。

在根元素上设置 overflow: hidden 将防止这种行为并允许 body 充当容器。