html - 另一个 div 和文本上的背景图像

Question

我必须塑造背景、左上角和右上角的形状。我需要保持形状的原始大小，但形状层覆盖在另一个 div 上。图像移动到顶部横幅和导航上方。如何保持背景图像大小，并且不覆盖在其他 div 上。我应该使所有其他 div 与 z -index 相关吗？

   <div class="nav">NAV SECTION</div>
   <div class="top-banner">TOP BANNER SECTION</div>
   <div class="wrapper">
        <div class="container">
        some content here/grid and on....
        <div class="shape-left shape-left--top"></div>
        <div class="shape-right shape-right--top"></div>
  </div>

  .shape-right, .shape-left {
    height: 100%;
    width: rem-calc(500);
    max-width: rem-calc(500);
    pointer-events: none;
   }

  /*=========================================================
   01. #SHAPE PLACEMENT LEFT
  =========================================================*/
  .shape-left--bottom {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: 0 -28%;
   }

   .shape-left--top {
      position: absolute;
      right: 0;
       left: 0;
       top: -40%;
       background-image: url(https://s12.postimg.org/p508mxwwd/shape_left_top.png);
       background-repeat: no-repeat;
     }

    /*=========================================================
     02. #SHAPE PLACEMENT RIGHT
     =========================================================*/
    .shape-right--bottom {
      position: absolute;
      right: 0;
      left: 0;
       bottom: 0;
      background-position: 0 -28%;
      }

     .shape-right--top {
         position: absolute;
         right: -5%;
         left: inherit;
         top: -40%;
         background-image: url(https://s18.postimg.org/v31a5sthl/shape_right_top.png);
         background-repeat: no-repeat;
     }

Answer 1

虽然我无法用您共享的代码和 CSS 产生问题。但如果它们有助于找到解决方案，这里有一些建议。由于您使用的是绝对位置，因此您需要使用左、右、上和下属性来控制定位，以确保图像 div 不会覆盖其他相对定位的 div。其次，您是否尝试过在 .shape-left--top 和 .shape-right--top 类？ (注意:根据需要应用 background-size 属性后，您仍然需要定位图像 div，因为它们是绝对的)