代码之家  ›  专栏  ›  技术社区  ›  nathanfranke

CSS-背景图像窥视前景

  •  0
  • nathanfranke  · 技术社区  · 6 年前

    我正在试验视差背景,我遇到了一个问题。根据某些情况,背景最终会从固定块元素前面窥视出来。

    正常: normal 问题: issue


    https://jsfiddle.net/ow1f6gcj/

    html,
    body {
      height: 100%;
      margin: 0px;
      perspective: 1px;
      transform-style: preserve-3d;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    
    .header {
      height: 256px;
      overflow: hidden;
      background-color: #222;
    }
    
    .header-image {
      height: 256px;
      background-image: url('https://placehold.it/600x400');
      background-position: center;
      background-repeat: no-repeat;
      transform: translateY(-50vh)/* Top of screen */
      translateY(128px)/* Middle of header */
      translateZ(-1px)/* Back */
      ;
    }
    
    .block {
      position: fixed;
      overflow-y: hidden;
      width: 100%;
      height: 256px;
      background-color: rgba(255, 0, 0, 0.5);
      z-index: 10000;
    }
    <div class="block">
    </div>
    <div class="header">
      <div class="header-image"></div>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    2 回复  |  直到 5 年前
        1
  •  1
  •   MomasVII    6 年前

    好吧,你欠我这个人情,因为我把弄清真相作为我的使命。花的时间比我想承认的要多。

    translateY(-50vh) perspective-origin: top; 到html,正文。

    这是正确的代码。

    .header-image {
        height: 256px;
        background-image: url(https://placehold.it/600x400);
        background-position: center;
        background-repeat: no-repeat;
        transform: perspective(1px);
        transform: translateY(128px) translateZ(-1px);
    }
    

    html, body {
        height: 100%;
        margin: 0px;
        perspective: 1px;
        transform-style: preserve-3d;
        overflow-x: hidden;
        overflow-y: scroll;
        perspective-origin: top;
    }
    

    透视原点:顶部; 这个 translateZ(-1px)

        2
  •  1
  •   MomasVII    6 年前

    z-index: 10000; .block .