Question

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

   <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的问题。但是，如果他们帮助找到解决方案，这里有一些指示。由于您的使用位置是绝对的，因此您需要使用left，right，top和bottom属性来控制定位，以确保图像div不会覆盖其他相对定位的div。第二，您是否尝试在Point和background-size: cover;类中使用background-size:contain;或.shape-left--top？（注意：在根据需要应用background-size属性后，您仍然需要将图像div定位为绝对值）

在另一个div和文本的背景图象

1 个答案: