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

你也可以看到还有盒子阴影。您可以使用以下方法删除它

box-shadow: none;

更新的小提琴：https://jsfiddle.net/udgw71no/6/