Question

我有这个代码片段，我有整个身体的背景，我有一个包含一个按钮的行我想要更改它的顶部值按钮下降并保持设备的响应性。 100％的背景大小不起作用，我设置1700％，这很奇怪而我的主要问题是前50％没有做任何事情

@media only screen and (min-width : 320px) {
  body{
      background: url("../images/background.jpg");
      background-repeat: no-repeat;
      background-size: 100% 1700%;
  }
  .buttonBox{
      /*margin-top: 130%;*/
      text-align: center;
      position: relative;
      top:50%
  }
  .buttonBox button{
      font-size: 4vw;
      width: 100%;
  }
}

<div class="container">
    <div class="row buttonBox">
        <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3">
            <button class="btn btn-success text-center">دانلود و نصب</button>
        </div>
    </div>
</div>

Answer 1

为了使.buttonBox顶部位置起作用，你需要给它的容器元素.container一个固定的高度，例如：

.container {
  height: 35px;
}

注意顶部：50％将是容器高度的50％。如果您希望将其设置为页面高度的50％，则使用VH而不是％

可能会获得更多成功

.buttonBox {
  top: 50vh;
}

更改行的顶部值而不对背景大小进行任何更改

1 个答案: