0

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

这是结果页面：带有意外白色背景的缩略图库 这是我页面的代码。

<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 的 Express 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;
 }

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

继承似乎会导致问题：请参阅未考虑的属性

4

2 回答 2

0

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

使用自定义 CSS 覆盖

.thumbnail{
background-color:transparent;
}

试一试。

希望这可以帮助..

于 2017-08-01T07:02:25.627 回答
0

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

.thumbnail{
   padding: 0;
 }
于 2017-08-01T07:18:43.140 回答