我可以嵌套 CSS 视差组吗？
发布于2023-05-29 21:20 阅读(174) 评论(0) 点赞(19) 收藏(5)
jsfiddle: https://jsfiddle.net/c3fveqgz/1/
改编自：https ://keithclark.co.uk/articles/pure-css-parallax-websites/
我有一个静态元素，其子项中有视差背景图像。我想让那个外部元素也有视差效果。
我已经在 jsfiddle 中包含了我天真的尝试，并且当id="NEST_ME"是id="INSIDE_HERE".
这是 HTML：
<div class="parallax-wrap">
<div id="NEST_ME" class="parallax-view-wrap" style="height:60vh;">
<div class="parallax-view" style="top:0; bottom:40vh">
<div class="parallax-group">
<div class="parallax-back cat-img"></div>
</div>
</div>
<div class="parallax-view" style="top:20vh; bottom:20vh">
<div class="parallax-group">
<div class="parallax-back cat-img"></div>
</div>
</div>
<div class="parallax-view" style="top:40vh; bottom:0;">
<div class="parallax-group">
<div class="parallax-back cat-img"></div>
</div>
</div>
</div>
<div class="parallax-group">
<div id="INSIDE_HERE" class="parallax-fore cat-img"></div>
</div>
</div>
您可以在 jsfiddle 链接中查看 CSS。
解决方案
如果您将parallax-group类添加到id="INSIDE_HERE"小提琴中第 27 行的元素，它就会起作用：https://jsfiddle.net/bc4umhxv/3/
transform-style: preserve-3d;似乎它与您在父元素上需要的属性有关。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/528446/ada22b26af21b3475f3d/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力