Diesen störenden weißen Hintergrund aus den Thumbnails in Bootstrap 3 entfernen

Question

Ich habe ein kleines Stück Code erstellt, wo es 4 Thumbnails in einer Reihe gleicher Rasterweite zeigt.

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

Wenn Sie den Code ausführen, werden Sie feststellen, dass es ein weißer Hintergrund ist, das entfernt werden muss. Ich habe diese CSS einfachen Code, aber es hat nicht funktioniert :(.

.thumbnail { 
    border: 0; 
} 

Auch ich Ihnen die jsfiddle gebe.

Irgendwelche Ideen,

Dank Theo.

Answer 1

Wenn ich nicht falsch bin, dann wollte man den weißen Hintergrund aus dem Kreis Bild zurück nur entfernen.

Ich habe diese

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

Und man kann sehen, dass es auch Kasten Schatten ist. Sie können das Entfernen von

box-shadow: none; 

Aktualisiert Geige mit: https://jsfiddle.net/udgw71no/6/

Answer 2

Suche dafür?

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

Demo

Answer 3

Geben Sie Hintergrundfarbe als transparent für thumbnail Klasse

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

Aktualisiert Geige: https://jsfiddle.net/affaz/udgw71no/8/

Answer 4

entfernen Hintergrund der Miniatur aber es arbeiten zu machen.

.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

folgende Arten einstellen sollte es tun:

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