从 Bootstrap 3 的缩略图中删除烦人的白色背景

Posted 2023-03-29

【中文标题】从 Bootstrap 3 的缩略图中删除烦人的白色背景

【英文标题】：Removing that annoying white background from thumbnails in Bootstrap 3

【发布时间】：2017-07-02 08:08:50

【问题描述】：

我创建了一小段代码，它在一行中显示 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" > 
               </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" > 
               </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" > 
               </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" > 
               </a>
            </div>
        </div>   
 </div>

如果你运行代码，你会注意到有一个白色的背景需要被移除。我把这个 css 简单的代码，但它没有工作:(。

.thumbnail 
  border: 0;

我也给你jsfiddle。

任何想法，

谢谢西奥。

【参考方案1】：

如果我没有错，那么您只想从圆形图像中删除白色背景。

我添加了这个

.thumbnail 
  border: 0;
  background: transparent;

你也可以看到盒子阴影。您可以使用

将其删除

box-shadow: none;

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

【参考方案2】：

将transparent 的背景颜色设为thumbnail 类

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

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

【参考方案3】：

寻找这个？

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

Demo

【参考方案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" > 
               </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" > 
               </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" > 
               </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" > 
               </a>
            </div>
        </div>   
 </div>

【参考方案5】：

设置以下样式应该可以做到：

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