html - 如何增加我的背景图片和位置按钮的高度

Question

      <div class = "LeftMain" >

              <a href = "#" > <button>Go</button></a>



      </div>


.LeftMain{

    float: left;
    width: 600px;
 }



.LeftMain {
    background: url(Astronaut.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

我正在创建一个迷你元素，我正在尝试创建一个出现在背景图像前面的按钮，这实际上不起作用，因为它只显示背景图像的顶部部分以及按钮“开始”。我已将该部分分为两部分，但我现在只谈论左侧。那么如何使完整的背景图像出现在背景图像中央的按钮上呢？

Answer 1

你的意思是这样的吗？

.container {
  width: 200px;
  height: 200px;
  position: relative;
  background: url(http://www.indiacrunch.in/wp-content/uploads/2014/11/Astronaut-in-India.jpg);
  background-size: cover;
  background-position: center;
}
.container button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <button>Go</button>
</div>