раздел формы слева от фонового изображения - PullRequest
Новая
       36

раздел формы слева от фонового изображения

0 голосов
/ 01 октября 2019

Я пытаюсь скопировать дизайн https://www.wework.com/ баннерной секции, где есть фоновое изображение шириной 83,33% и форма, расположенная чуть выше фонового изображения в левой позиции. Я мог бы показать раздел формы над фоновым изображением, а также слева, но не совсем так, как показано на следующем рисунке, где около 50-60% находится за пределами изображения.

enter image description here

для ясного изображения, пожалуйста, посмотрите на сайте 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

1 Ответ

0 голосов
/ 01 октября 2019

Вместо того, чтобы иметь фоновое изображение в отдельном контейнере после формы, почему бы не сделать изображение фоновым изображением на внешней оболочке (раздел героя)? Я установил ширину контейнера фонового изображения на 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;
}
...