css - Bootstrap 3 为缩略图背景添加不透明度

Question

我想在 bootstrap 中为缩略图类添加不透明度，但我只想对背景颜色使用不透明度，而不是对部分中的其他文本使用不透明度。如果我使用:

.thumbnail {
opacity: 0.6;
}

这适应于空洞内容，我正在尝试段落标签不要使用这种不透明度。谢谢，P

<div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="img/box/1.jpg" alt="...">
      <div class="caption">
        <h3 >Test</h3>
        <p >
Testtt
        </p>
        <p><a href="#" >Link</a></p>
      </div>
    </div>
  </div>

Answer 1

如果是缩略图的完整背景图像，则只需使用:

.thumbnail > img {
    opacity: 0.6;
}

如果您在缩略图上使用背景样式，则使用:

.thumbnail {
    background-color: rgba(0, 0, 0, 0.6);
}