问题描述
问题
我正在尝试将视差背景放入具有严格尺寸 (width: 100%
,height: 200px
) 的 div 中并剪切其余部分 (overflow: hidden
)。这在 Chrome 中运行良好,但 Firefox 似乎不喜欢 .wrapper
-div。一旦我使用 transform-style
-div(我需要剪切图像),它看起来似乎没有应用 perspective
和/或 .wrapper
。
问题
Firefox 有限制吗? (希望有解决方法?)
在 Chrome 中工作的示例(但不在 Firefox 中):
body {
margin: 0px;
}
.main {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
.wrapper {
position: relative;
overflow:hidden;
height: 200px;
border: 1px dashed green;
}
.parallax-background {
position: absolute;
height: 100vh;
width: 100%;
z-index: -1;
top: 0;
right:0;
left: 0;
bottom: 0;
transform: translateZ(-1px) scale(2.5);
background-image: linear-gradient(#ccc 50%,#777 50%);
background-size: 50px 50px;
overflow: hidden;
}
<div class="main">
<div class="container">
<h1>A</h1>
</div>
<div class="wrapper">
<div class="parallax-background"></div>
Some Content
</div>
<div class="container">
<h1>B</h1>
</div>
<div class="wrapper">
<div class="parallax-background"></div>
Some more Content
</div>
<div class="container">
<h1>C</h1>
</div>
</div>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)