Question

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

<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/

然后我添加了灯箱细节。

Answer 1

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

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

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

＆＃13;

.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;
}

＆＃13;

参考

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

简单的HTML灯箱

1 个答案: