我设法为一个部分的背景创建一个CSS视差效果,使其滚动速度比周围环境慢。 更确切地说,它为整个部分添加了一个translateZ,它与所有其他部分重叠。
这就是我的问题:我不希望整个部分比其他部分滚动得慢,我只想要背景图像来做到这一点。它上面的标题应正常滚动。
如何在背景图像上添加视差效果,而该部分的所有其他元素保持不会有任何滚动效果?
这是我的意思:
WITH src AS (
SELECT '2000' AS y FROM DUAL UNION ALL
SELECT '1991' AS y FROM DUAL UNION ALL
SELECT '20--' AS y FROM DUAL UNION ALL
SELECT '09' AS y FROM DUAL UNION ALL
SELECT '11' AS y FROM DUAL UNION ALL
SELECT '95' AS y FROM DUAL
)
SELECT s.y, TO_NUMBER(REGEXP_SUBSTR(s.y, '^\d+$'))
FROM src s;
.wrap {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.section {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 100;
background: #fff;
height: 50vh;
}
.section-content {
background: rgba(255, 255, 255, 0.5);
padding: 0 15px;
z-index: 100;
}
.parallax {
transform: translateZ(-1px) scale(2);
z-index: 90;
}
.background {
display: flex;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 80;
}
.background-image {
position: absolute;
width: 100%;
}
.section .background img {
width: 100%;
top: -50vh;
z-index: 90;
}
答案 0 :(得分:0)
尝试添加" parallax"上课到"背景"而不是"部分"。
.wrap {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.section {
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
background: #fff;
height: 50vh;
}
.section-content {
background: rgba(255, 255, 255, 0.5);
padding: 0 15px;
z-index: 100;
}
.parallax {
transform: translateZ(-1px) scale(2);
z-index: 90;
}
.background {
display: flex;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 80;
}
.background-image {
position: absolute;
width: 100%;
}
.section .background img {
width: 100%;
top: -50vh;
z-index: 90;
}

<div class="wrap">
<div class="section section-md">
<div class="section-content">
Hello World
</div>
</div>
<div class=" section ">
<div class="background parallax">
<div class="background-image ">
<img src="http://story-teller-photography.de/upload/outland/convert/c857a6dc02e0e048a12d91f58cbeec39_1800_0.jpg">
</div>
</div>
<div class="section-content">
<h2>Heading</h2>
</div>
</div>
<div class="section">
<div class="section-content">
Hello World
</div>
</div>
<div class="section">
<div class="section-content">
Hello World
</div>
</div>
</div>
&#13;