將文字放入內容欄？

我試圖把一些內容放入一個不透明度爲0.6的內容欄。我不希望內容（文字，視頻等）與內容欄具有相同的不透明度。我嘗試將它們放入兩個不同的div標籤中，其中一個放在另一個標籤中，但是當我這樣做時，文本不會放在內容欄上。將文字放入內容欄？

希望我解釋得不錯。

.content { 
 
    color: #ffffff; 
 
    position: relative; 
 
    z-index:1; 
 
} 
 

 
.bg { 
 
    width: 80% 
 
    opacity: .6; 
 
    background-color: #000000; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    border-radius: 3px; 
 
    overflow: hidden; 
 
}

<div class="content"> 
 
    <p>Hello World!</p> 
 
    <div class="bg"> 
 
    <h1>Hello world!</h1> 
 
    </div> \t 
 
</div>

來源

2016-02-19 Dorian Jones

使用不同的z索引試過？ – HAlexTM

嗨，這裏是確切的問題，希望它有幫助！ http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-affect-in-child-div – Keff

每個人都會建議使用「RGBA」顏色而不是「HEX」，並且如果您使用的背景顏色可以正常工作。

#content { 
 
    background: rgba(0,0,0,0.5); 
 
}

<div id='content'><p>Hello World</p></div>

如果您使用的是彩色圖像或其他的東西，那麼你將不得不繼續與你的兩個div，一個接一個的下的做法。與此相關的問題是內容必須有固定的高度才能正確對齊所有內容。

#content, 
 
#bg, 
 
#content p { 
 
    display: block; 
 
    width: 200px; 
 
    height: 30px; 
 
} 
 
#content { 
 
    position: relative; 
 
    z-index: 0; 
 
} 
 
#bg, 
 
#content p { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
#bg { 
 
    background: #36f; /* Can be an image */ 
 
    opacity: 0.5; 
 
    z-index: 1; 
 
} 
 
#content p { 
 
    line-height: 30px; 
 
    text-align: center; 
 
    color: black; 
 
    z-index: 2; 
 
    margin: 0; 
 
}

<div id='content'> 
 
    <div id='bg'></div> 
 
    <p>Hello World</p> 
 
</div>

來源

2016-02-19 13:18:09

哦！完美的作品，非常感謝！ –

代替使用HEX顏色代碼在.bg類使用RGBA顏色像background-color:rgba(0, 0, 0, 0.6) &除去opacity:0.6的。因爲不透明元素下的每個孩子也都變得透明。

來源

2016-02-19 13:07:48 saadeez

你不能以不透明的方式做到這一點，因爲所有的子元素都會將父母的不透明度作爲基準。你可以做的是使用背景：rgba（）;使父母的背景透明，同時不影響其子女。看到這http://jsbin.com/taxevufaqo/edit?html,css,output

來源

2016-02-19 13:08:34 Joseph

你可以做到這一點，如果文本和BG是在z軸上堆疊的兄弟姐妹。兄弟姐妹的混濁不會相互影響。 –

對，我知道多利安希望父母不透明，但不要孩子。我再次讀到這個問題，我不確定是哪一種情況... – Joseph

他沒有詳細說明哪個物品有不透明性。他只是想在文字背後的不透明，並不希望文字受到影響。 –

是的我已經有這個問題幾次，最好的解決辦法是這個快速入侵。

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

在檢查元素中更改255，直到找到所需的顏色。希望有所幫助。

來源

2016-02-19 13:11:22 Beep

將文字放入內容欄？

回答

相關問題