在图像网格上叠加表单

Question

我有一个代码使用 bootstrap 4

<div class="container-fluid">
      <div class="row">
          <div class="col-lg-6">
               <a class="lightbox" href="./images/bg.jpg">
                <img src="{{ listing.photo_main.url }}" alt="" class="img-fluid">
              </a>
          </div>
            <div class="row col-lg-6">
                <div class="col-md-6">
                  <a class="lightbox" href="./images/bg.jpg">
                    <img src="{{ listing.photo_1.url }}" alt="" width="370px" height="240px">
                  </a>
                </div>
                <div class="col-md-6">
                  <a class="lightbox" href="./images/bg.jpg">
                    <img src="{{ listing.photo_2.url }}" alt=""  width="370px" height="240px">
                  </a>
                </div>
                <div class="col-md-6">
                  <a class="lightbox" href="./images/bg.jpg">
                    <img src="{{ listing.photo_3.url }}" alt="" width="370px" height="240px">
                  </a>
                </div>
                <div class="col-md-6">
                  <a class="lightbox" href="./images/bg.jpg">
                    <img src="{{ listing.photo_4.url }}" alt="" width="370px" height="240px">
                  </a>
                </div>
              </div>
      </div>
    </div>

请大家指教，如何制作如下图的overlay submit form

Answer 1

参考此 url 如何向图像添加表单 - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_form_on_image，希望这对您有所帮助...

在图像网格上叠加表单

Overlay a form on the grid of images

overlay

twitter-bootstrap

bootstrap-4