NodeJS+Bootstrapp+CSS: галерея миниатюр наращивания дома добавляет белый фон к изображениям

У меня есть контейнер с именем mainContainer. В этом контейнере я хочу создать галерею миниатюр. К сожалению, когда я изменяю свой CSS, у меня возникают некоторые проблемы, у меня есть белый цвет фона вместо цвета фона для моего основного контейнера.

Вот страница результатов: галерея миниатюр с неожиданным белым фоном. Вот код моей страницы.

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

Экспресс код JS для функции createThumbnail:

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

Я буду признателен за объяснение. Что я должен сделать, чтобы удалить эти белые цвета фона?

Наследование, кажется, вызывает проблемы: см. Свойства, не принятые во внимание

Источник

2 ответа

Решение

Вы должны удалить padding в противном случае, если вы сделаете background-color прозрачный.

.thumbnail{
   padding: 0;
 }
Источник

Bootstrap по умолчанию добавляет background-color:white в thumbnail учебный класс.

Переопределить с помощью пользовательского CSS

.thumbnail{
background-color:transparent;
}

и попробовать.

Надеюсь это поможет..

Источник
Другие вопросы по тегам