简单的 HTML 灯箱

【问题标题】：Simple HTML Lightbox简单的 HTML 灯箱
【发布时间】：2018-11-27 21:48:01
【问题描述】：

我创建了一个简单的灯箱：

<div class="row text-center text-lg-left">
  <div class="col-lg-3 col-md-4 col-xs-6">
  <a href="CoupleFull.jpg" data-title="Hi" data-lightbox=  class="d-block 
   mb-4 h-100">
  <img class="img-fluid img-thumbnail" src="Couple.jpg" alt=""></a>
  </div>
</div>

当完整尺寸的照片弹出时，它背后有一个深色背景。我想改变颜色。我该怎么做？

关于我的代码的附加信息：

我使用了此页面中的 Bootstrap 缩略图库模板： https://blackrockdigital.github.io/startbootstrap-thumbnail-gallery/

然后我添加了灯箱详细信息。

【问题讨论】：

标签： html css twitter-bootstrap gallery thumbnails

【解决方案1】：

代码需要更清晰，您使用哪个库作为灯箱，因为您提供的构建没有实现灯箱

但是，如果您使用引导模式来显示您的图像。尝试找出您构建的modal-backdrop 类并用您的background-color 覆盖它。

<div class="modal-backdrop fade in"></div>

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: red;
}

// change background-color property as per your design


//Change the opacity of backdrop

.modal-backdrop.in {
  opacity: .8;
}

参考文献

https://bootsnipp.com/snippets/7XVM2（在这里试试）
Change the background color in a twitter bootstrap modal?

【讨论】：