從Bootstrap中刪除令人討厭的白色背景縮略圖3

Question

我創建了一小段代碼，它在等寬的網格中顯示了4個縮略圖。

.row-content-3 { 
 
    background-color: rgba(0,0,0,0.8) !important; 
 
    color: #fff; 
 
    margin:0px auto; 
 
    padding: 50px 0px 50px 0px; 
 
    min-height:200px; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row row-content-3"> 
 
     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
 
      <div class="thumbnail"> 
 
       <a href="#"> 
 
       <img src="http://www.theo-android.co.uk/github-images/fair1.png" class="img-circle" alt="Larissa's fair"> 
 
       </a> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
 
      <div class="thumbnail"> 
 
       <a href="#"> 
 
       <img src="http://www.theo-android.co.uk/github-images/fair2.png" class="img-circle" alt="Larissa's fair"> 
 
       </a> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
 
      <div class="thumbnail"> 
 
       <a href="#"> 
 
       <img src="http://www.theo-android.co.uk/github-images/fair3.png" class="img-circle" alt="Larissa's fair"> 
 
       </a> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
 
      <div class="thumbnail"> 
 
       <a href="#"> 
 
       <img src="http://www.theo-android.co.uk/github-images/fair4.png" class="img-circle" alt="Larissa's fair"> 
 
       </a> 
 
      </div> 
 
     </div> 
 
</div>

如果您運行的代碼，你會發現有一個白色的背景，需要被刪除。我把這個簡單的CSS代碼，但它沒有工作:(。

.thumbnail { 
    border: 0; 
} 

而且我給你的jsfiddle。

任何想法，

感謝西奧。

Answer 1

如果我沒看錯的，那麼你想刪除回的只有一圈圖像的白色背景。

我說這個

.thumbnail { 
    border: 0; 
    background: transparent; 
} 

而且你可以看到有箱的影子了。 https://jsfiddle.net/udgw71no/6/

：您可以通過使用

box-shadow: none; 

更新小提琴刪除

Answer 2

展望此？

.thumbnail { 
    border: 0; 
    background: transparent; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

Demo

Answer 3

給背景色爲transparent類thumbnail

.thumbnail { 
    border: 0; 
    background-color:transparent; 
} 

更新小提琴：https://jsfiddle.net/affaz/udgw71no/8/

Answer 4

縮略圖，但讓它工作的刪除背景。

.row-content-3 { 
 
    background-color: rgba(0,0,0,0.8) !important; 
 
    color: #fff; 
 
    margin:0px auto; 
 
    padding: 50px 0px 50px 0px; 
 
    min-height:200px; 
 
} 
 

 
.thumbnail { 
 
    background: none !important; 
 
    border: 0 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row row-content-3"> 
 
     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
 
      <div class="thumbnail"> 
 
       <a href="#"> 
 
       <img src="http://www.theo-android.co.uk/github-images/fair1.png" class="img-circle" alt="Larissa's fair"> 
 
       </a> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
 
      <div class="thumbnail"> 
 
       <a href="#"> 
 
       <img src="http://www.theo-android.co.uk/github-images/fair2.png" class="img-circle" alt="Larissa's fair"> 
 
       </a> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
 
      <div class="thumbnail"> 
 
       <a href="#"> 
 
       <img src="http://www.theo-android.co.uk/github-images/fair3.png" class="img-circle" alt="Larissa's fair"> 
 
       </a> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
 
      <div class="thumbnail"> 
 
       <a href="#"> 
 
       <img src="http://www.theo-android.co.uk/github-images/fair4.png" class="img-circle" alt="Larissa's fair"> 
 
       </a> 
 
      </div> 
 
     </div> 
 
</div>

Answer 5

設置以下樣式應該這樣做：

.thumbnail { 
    background-color: transparent; 
    border: none; 
}