Xóa nền trắng khó chịu khỏi hình thu nhỏ trong Bootstrap 3

Question

Tôi đã tạo một đoạn mã nhỏ trong đó nó hiển thị 4 hình nhỏ trong một hàng có chiều rộng lưới bằng nhau.

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

Nếu bạn chạy mã này, bạn sẽ nhận thấy rằng có một nền trắng mà cần phải được loại bỏ. Tôi đặt css mã đơn giản này, nhưng nó đã không làm việc :(.

.thumbnail { 
    border: 0; 
} 

Ngoài ra tôi đang đem đến cho bạn jsfiddle.

Bất kỳ ý tưởng,

Nhờ Theo.

Answer 1

Nếu tôi không nhầm thì bạn muốn loại bỏ nền trắng từ hình ảnh vòng tròn trở lại mà thôi.

tôi thêm này

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

Và bạn có thể thấy có hộp bóng quá. Bạn có thể loại bỏ bằng cách sử dụng

box-shadow: none; 

Cập nhật fiddle: https://jsfiddle.net/udgw71no/6/

Answer 2

Nhìn cho điều này?

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

Demo

Answer 3

Cho màu nền như transparent cho thumbnail lớp

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

fiddle Cập nhật: https://jsfiddle.net/affaz/udgw71no/8/

Answer 4

loại bỏ nền của hình ảnh thu nhỏ nhưng để làm cho nó làm việc.

.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

Thiết lập phong cách sau đây nên làm điều đó:

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