Bootstrap 容器中的 Laravel 动态图像

Question

我有一个 laravel 应用程序，可以让我上传旅游，最终也允许用户这样做。在我的单视图游览页面（希望会有数百个）上，每个游览都有自己的封面图片。这是由我或用户上传到我通过 src="{{ $tour->coverPhoto }}"

调用的数据库

我尝试寻找解决方案，但似乎找不到。我想在此封面照片中添加另一个 div，以便我可以将信息放在封面照片上方。

这是我目前所拥有的：（我正在使用引导程序）

CSS

.bg-image {
    position: relative;
    overflow: hidden;
    transform: scale(1.03);
}
.bg-image img {
    display: block;
    width: 100%;
    max-height: 100vh;
    max-width: 1900px;
    margin: 0 auto;
    filter: url(blur.svg#blur);
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

HTML：

<div class="container-fluid">
    <div class="row">
        <div class="bg-image">
            <img src="http://placehold.it/1900x900">
            <div class="container">
                <div class="col-md-3">
                <p> hi</p>
                </div>
                <div class="col-md-9">
                <p>hi</p>
                </div>
            </div>
        </div>
    </div>
</div>

我制作了一个主要显示正在发生的事情的 JSfiddle。感谢您提供任何帮助！ https://jsfiddle.net/c1tn14ta/

Answer 1

这样的事情可能会有所帮助，请参阅位置和 z-index 的使用。

http://codepen.io/simondavies/pen/ONKLpx

HTML

  <div class="image-outer-wrapper">
    <div class="image-wrapper"><img src="http://placehold.it/300x300"></div>
    <div class="content-wrapper">
      <div class="content">
        content here...
      </div>
    </div>
  </div>

CSS

  .image-outer-wrapper {
    margin: 0;
    padding:0;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 300px;
    box-sizing: border-box;
  }

  .image-wrapper {
    margin: 0;
    padding:0;
    z-index: 30;
    box-sizing: border-box;
  }

  .content-wrapper {
    margin: 0;
    padding:0;
    position: absolute;
    bottom: 0;
    z-index: 40;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    background: rgba(0,0,0,.3);
  }

  .content {
    margin:0;
    padding: 10px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }