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

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

然而，正如你所看到的，div的元素不透明度变过。图像是使用媒体类的div，并且它旁边的div使用媒体主体类，并且只包含段落的标题。没什么特别的。这是它的代码。

<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码一展身手。

来源

2017-02-12 Theo

你能请在这里创建一个jsfiddle或可运行的代码片段？ –

我想添加CSS和JS库，但我不知道如何:(https://jsfiddle.net/2L42j4bb/ – Theo

https://jsfiddle.net/2L42j4bb/4/这是否工作？ –

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

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

这里使用的是RGB设置背景颜色，然后加入阿尔法，这将允许您控制不透明度：

这是可以做到的。

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

来源

2017-02-12 16:09:29

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

回答

相关问题