NodeJS+Bootstrapp+CSS : home buildup thumbnail gallery 添加白色背景图片

Question

我有一个名为 mainContainer 的容器。在这个容器中，我想创建一个缩略图库。不幸的是，当我修改我的 CSS 时，我遇到了一些问题，我有一些白色背景颜色而不是我的 mainContainer 的背景颜色。

这是结果页面：thumbnail gallery with unexpected white background 这是我页面的代码。

<html lang='fr'>
  <head>
    <% include includes/head-global %>
    <% include includes/head-bootstrap %>
  </head>
  <body onload="buildUpPage()">
    <div class = "container mainContainer" id = "mainContainer">
      <div class="row" id="galleryTargets">  <!-- Row : thumbnail          -->
      </div>
  </body>

  <% include tools/thumbnail %>
  <script>
  function buildUpPage() {
    var universData = <%- universData %>
    createThumbnail(universData.targets, "galleryTargets", "/" + univers.name + "/")
  }
  </script>

表达函数createThumbnail的JS代码：

<script>
  function addOneCaptionToContainer (item, containerDOM, baseImgTargetUrl) {
    var thumbnail = document.createElement("div")
    thumbnail.setAttribute("class", "thumbnail col-xs-4")

    var ref = document.createElement("a")
    ref.setAttribute("href", baseImgTargetUrl + item.name)
    ref.setAttribute("class", "thumbnail")
    thumbnail.appendChild(ref)

    var img =  document.createElement("img")
    img.setAttribute("src", "/"+item.backgroundImage)
    img.setAttribute("class", "imgThumbnails")
    ref.appendChild(img)

    document.getElementById(containerDOM).appendChild(thumbnail)
  }
  function createThumbnail(itemsList, containerDOM, baseImgTargetUrl) {
    for (let u of itemsList) {
      addOneCaptionToContainer(u, containerDOM, baseImgTargetUrl)
    }

  }
</script>

现在 CSS 部分：

.mainContainer{
 background-color: #A6A4AA;
 } 
.imgThumbnails {
 /*for the thumbnails in the gallery */
  margin: 0px;
  border-style:solid;
  border-width: medium;
  border-color: #2C3756;  
  border-radius: 10px;
 }

我将不胜感激。我必须怎么做才能去除这些白色背景颜色？

继承似乎会导致问题：请参阅 Properties not taken into account

Answer 1

Bootstrap 默认添加 background-color:white 到 thumbnail class.

用自定义覆盖 CSS

.thumbnail{
background-color:transparent;
}

试一试。

希望这对您有所帮助..

Answer 2

您必须删除 padding 否则如果您使 background-color 透明，space 将是空的。

.thumbnail{
   padding: 0;
 }

NodeJS+Bootstrapp+CSS : home buildup thumbnail gallery 添加白色背景图片

NodeJS+Bootstrapp+CSS : home buildup thumbnail gallery add white background to images

javascript

css

image-rendering