僅更改外部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的不透明度而不更改其元素

回答

相關問題