Question

我在material.io上发现了这个效果：https://material.io/gallery/

图像是固定的并被黑色图像覆盖，但是z-index必须小于它，因为第一个bg覆盖它。在我的pov中它只有工作，当另一个div没有任何不透明度时，会阻挡第一个图像。这在某种程度上是可能的还是他们使用不同的方法？

Answer 1

编辑：这类似于视差但不完全是视差。如果您检查html，您将看到image / svg部分不滚动但文本确实如此。通过给svg部分提供不同的z-index值，这是可能的。图像在不同的部分是不同的，只是那些不与文本一起移动所以看起来好像图像是重复的。

我建议你通过他们的CSS来更好地理解。

此效果称为视差效果。您可以使用http://materializecss.com/parallax.html之类的库要创建它，您也可以创建自己的https://www.w3schools.com/howto/howto_css_parallax.asp

Answer 2

两个图形元素是position:fixed每个包含这些图形的行在z-index中以递增方式位于更高位置并且overflow:hidden设置

body {
  margin:0;
}
section {
  height:100vh; position: relative; overflow:hidden;
}
section div {
  position:fixed; top:50%; left:100px; width:100px; height:100px; border:2px solid white; margin-top:-50px;
}
section.red { z-index:1; }
section.blue { z-index:2; }
.red { background:red; }
.blue { background:blue; }

<section class="red">
  <div class="blue"></div>
</section>
<section class="blue">
 <div class="red"></div>
</section>

简化示例代码：https://codepen.io/saetia/pen/mwBypp

使用div阻止文本的可见性？

2 个答案: