背景图像左侧的表单部分

Question

我正在尝试复制https://www.wework.com/ 横幅部分的设计，其中有一个宽度为 83.33% 的背景图像和一个位于左侧位置的背景图像上方的表单部分。我可以在背景图像上方和左侧位置显示表单部分，但不完全符合以下设计，其中大约 50-60% 在图像之外。

图片清晰请看网站https://www.wework.com/

这是我的做法

<section class="hero-section">
   <section class="form">
     <h1>Search Form</h1>
     <form>
       <input type="text" name="search" />
       <input type="text" name="location" />
       <button>Submit</button>
     </form>
   </section>
  <section class="img-background">
    <div class="image">
    </div>
  </section>
</section>

.hero-section {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -12px;
  position: relative;
}

.form {
  position: absolute;
  left: 0;
  top: calc(50% - 2rem);
  transform: translateY(-50%);
  padding-left: 12px;
  margin-top: 0;
  z-index: 1;
  background: #fff;
  border-radius: .25rem;
  width: 33.33%;
  order: 2;
}

.img-background {
  width: 83.33%;
  border-radius: .25rem;
  margin: 0 12px;
  order: 1;
}

.image {
  background-image: url("https://ctfassets.imgix.net/vh7r69kgcki3/3Rp8TadHuB4736bDSYrMk7/d5585f00041d9b38458e7f8fd77f56ae/Web_150DPI-2018_11_19_WW_SF_1047_0989_1157_2385__1_.jpg?auto=format%20compress&fit=crop&q=50&w=2250&h=1266");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
  display: block;
  padding: 9em;
}

解决方法，这里是https://jsbin.com/habugepado/edit?html,css

Answer 1

与其在表单之后的单独容器中放置背景图像，不如将图像作为外包装（英雄部分）上的背景图像？ 我将背景图片容器的宽度调整为 35%，以便在左侧留出足够的空间，以便可以容纳表单。

这是 HTML

<section class="hero-section image">
   <div class="form">
     <h1>Search Form</h1>
     <form class="form-wrapper">
       <input type="text" name="search" />
       <input type="text" name="location" />
       <button>Submit</button>
     </form>
   </div>
</section>

CSS

.hero-section {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -12px;
  position: relative;
}

.form-wrapper {
  display: flex;
  flex-flow: row wrap;
  max-width: 200px;
  width: 100%;
}
input {
  margin: 10px 0;
}

.form {
  background: #fff;
  padding: 30px 30px 30px 10px;
  max-width: 150px;
  position: absolute;
  top: 30px;
  left: -60px;
}


.image {
  background-image: url("https://ctfassets.imgix.net/vh7r69kgcki3/3Rp8TadHuB4736bDSYrMk7/d5585f00041d9b38458e7f8fd77f56ae/Web_150DPI-2018_11_19_WW_SF_1047_0989_1157_2385__1_.jpg?auto=format%20compress&fit=crop&q=50&w=2250&h=1266");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 35%;
  height: auto;
  display: block;
  padding: 9em;
  margin: 0 auto;
  position: relative;
}