NodeJS + Bootstrapp + CSS：home buildup thumbnail gallery在图像中添加白色背景

我有一个名为mainContainer的容器。在这个容器中，我想创建一个缩略图库。不幸的是，当我修改我的CSS时，我有一些问题，我有一些白色的背景颜色，而不是我的mainContainer的背景颜色。NodeJS + Bootstrapp + CSS：home buildup thumbnail gallery在图像中添加白色背景

这里是结果页面：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; 
}

我会明白的解释。我必须做些什么才能删除这些白色背景颜色？

继承似乎会导致问题：看到3210

来源

2017-08-01 Guzim Glorantha

你，如果你让background-color透明删除padding否则会出现空白。

.thumbnail{ 
    padding: 0; 
}

来源

2017-08-01 07:18:43 Aslam

Helo Hunzaboy和Chandra，谢谢你的帮助。它帮助我了解发生了什么。不幸的是，我需要更高的精度，图像仍然有填充和背景色。我编辑我的帖子给你新的结果。 –

嘿@GuzimGlorantha – Aslam

你好@Hunzaboy，谢谢你的帮助。任何想法如何有效地覆盖这两个属性？ –

引导默认添加background-color:white到thumbnail类。

覆盖与自定义CSS

.thumbnail{ 
background-color:transparent; 
}

，并给予一试。

希望这有助于..

来源

2017-08-01 07:02:25

NodeJS + Bootstrapp + CSS：home buildup thumbnail gallery在图像中添加白色背景

回答

相关问题