Question

这就是我想要实现的目标^（这是iphone5 320x568上的视图）

但是当我调整窗口大小（到iphone 6 375x667）时，我得到了这个

HTML：

    <div id="container">
        <div class="slicedimage">
            <div class="textboxtransparant">
                <h2>Since 1928</h2>
                <div class="divider"></div>
                <br/>
                <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.
                </p>
                <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>
            </div>
            <div class="transparantblack"></div>
        </div>
       <div class="slicedimage">
         <div class="textboxblack">
             <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non 
             </p>

         </div>
         <div class="blacktransparant"></div>
         <div class ="line"></div>
       </div>

CSS：

  body {
      margin: 0;
      padding: 0;
      font-size: 16px;
      /*font-family: Georgia;*/
      font-family: sans-serif;
      max-width: 640px;
      color: black;
  }

  #container {
      display: block;
      height:900px;
      width: 100%;
      position: relative;
      top: 50px;
      margin: 0;
      color: white;
      text-align: center;
  }

  .slicedimage {

      background-image:url('http://i.stack.imgur.com/yEQ6k.jpg');
      width:100%;


  }



    .textboxblack {

      background-color:black;

  }


  .line {

  position: absolute;
  width:1px;
  height: 50px;
  bottom: 80px; /*half the height*/
  left: 50%;
  border-left: 1px solid white;

  }

  .transparantblack {
    height: 100px;
  width: 100%;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
  }

.blacktransparant {
      height: 100px;
    width: 100%;
   background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
    }

  .blackgray {
    height:300px;
    width:100%;
    background:linear-gradient(341deg, #8a8a8a  0%, #8a8a8a  31.9%, #000 32.1%, #000 100%);
  }

更新帖子，因为堆栈溢出要求我添加更多信息，因为我的帖子主要是代码。是的，你明白了，让我们看看这是否足够。＆＃34;信息＆＃34;

Answer 1

您的目标是将白线保留在黑色透明元素中间的文本下方。

要实现这一目标，你需要使用line元素，blacktransparant div的一个孩子：

<div class="blacktransparant">
   <div class="line"></div>
</div>

并将blacktransparant设置为相对：

.blacktransparant {
   height: 100px;
   width: 100%;
   background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
   /* Add this */
   position: relative;
}

在此之后，您只需将箭头设置在相对于blacktransparant div的正确位置：

.line {
   position: absolute;
   width: 1px;
   height: 50px;
   /* bottom: 80px; Change to 25px */
   bottom: 25px;
   left: 50%;
   border-left: 1px solid white;
}

调整大小后Div移动

1 个答案: