我试图理解 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
容器元素?
最佳答案
这是因为 body 上 overflow
的值被转移到根元素,使 body 具有默认的 overflow: visible
并破坏了转换。参见 this section规范。
在根元素上设置 overflow: hidden
将防止这种行为并允许 body 充当容器。
关于html - 了解为什么纯 CSS 视差效果适用于 div,但不适用于 body 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27587751/