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在圖像中添加白色背景

回答

相關問題