仅更改外部div的不透明度而不更改其元素

Question

我正在练习我的引导技巧并创建了一个示例模板。所以我在其中一行中做的是添加一个CSS代码来减少它的不透明度。结果如下所示。

但是，正如您所看到的，div的元素不透明度也会发生变化。图像在使用媒体类的div中，并且它旁边的div使用media-body类，并且只包含一个段落的标题。没什么特别的。以下是它的代码。

 <div class="row row-content">
    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
      <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img src="img/alcazar.png" class="media-object img-thumbnail" alt="alcazar">
            </a>
        </div>
        <div class="media-body">
            <div class="media-heading"><h3>Alcazar Park</h3></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p>   
        </div>

        </div>  
      </div>
</div>

在开头，您会看到在CSS中使用的行内容类：

.row-content {
   background-color: #000 !important;
   color: #fff;
   opacity: 0.5;
   margin:0px auto;
   padding: 50px 0px 50px 0px;
   min-height:200px;
}

那么如何增加图片，标题和段落的不透明度呢？我认为这有点棘手。

谢谢，

西奥。

修改

以下是jsfiddle代码。

Answer 1

我建议只改变背景的不透明度，通过这样做，所有其他元素都不受样式属性的影响。

这可以通过以下方式完成：

background-color: rgba(0,0,0,0.5);

在这里，您使用RGB设置背景颜色，然后添加允许您控制不透明度的alpha。

rgba(Red,Green,Blue,Alpha)

我还建议添加!important，以便我们知道该样式正在被使用

你的实际例子：

.row-content {
   background-color: rgba(0,0,0,0.5) !important;
   color: #fff;
   margin:0px auto;
   padding: 50px 0px 50px 0px;
   min-height:200px;
}

以下是CodePen：http://codepen.io/GuruTom/pen/qRLrpz