程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

我可以嵌套 CSS 视差组吗?

发布于2023-05-29 21:20     阅读(158)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

19 0
收藏该文
已收藏

评论内容:(最多支持255个字符)