NodeJS+Bootstrap+CSS : 家庭构建缩略图库为图像添加白色背景答案

【问题标题】：NodeJS+Bootstrapp+CSS : home buildup thumbnail gallery add white background to imagesNodeJS+Bootstrap+CSS : 家庭构建缩略图库为图像添加白色背景
【发布时间】：2017-08-02 16:12:57
【问题描述】：

我有一个名为 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

【问题讨论】：

标签： javascript css image-rendering

【解决方案1】：

您必须删除padding，否则如果您使background-color 透明，则会出现空白空间。

.thumbnail{
   padding: 0;
 }

【讨论】：

Helo Hunzaboy 和 Chandra，感谢您的帮助。它帮助我理解发生了什么。不幸的是，我需要更高的精度，图像仍然有填充和背景色。我编辑了我的帖子给你新的结果。
嘿@GuzimGlorantha
你好@Hunzaboy，谢谢你的帮助。关于如何有效地覆盖这两个属性的任何想法？
@GuzimGlorantha ，只需将它们添加到样式表的底部即可。
谢谢，@hunzaboy。缓存清理无效，但重要标签有效。效果很好，非常感谢。

【解决方案2】：

默认情况下，Bootstrap 将 background-color:white 添加到 thumbnail 类。

使用自定义 CSS 覆盖

.thumbnail{
background-color:transparent;
}

试一试。

希望这会有所帮助..

【讨论】：