如何保持文本的不透明度100時，它的父容器是50

我有有一個不透明度設置爲50，這個div我想顯示一些文本不透明度100內部的列表格具有不透明性，如何保持文本的不透明度100時，它的父容器是50

這裏是我的意思是：

<div id="outer"> 
    <div id="inner"> 
    Text 
    </div> 
</div>

的CSS將是：

#outer { 
    opacity: 0.5; 
} 

#inner { 
    opacity: 1.0; 
}

我試過了，但它不工作。

請幫助

問候

來源

2011-06-22 Moksha

發表你有什麼？ –

向我們展示一些標記 – kinakuta

[CSS - 低透明度div上的不透明文本？]可能重複（http://stackoverflow.com/questions/2401953/css-opaque-text-on-low-opacity-div） –

有兩種方法可以做到這一點：一個是剛剛容器的背景顏色設置爲透明色，與rgba(r,g,b,.5) - 然而，這是CSS3，只支持在較新的瀏覽器中。

另一種方法是在容器中放置一個絕對定位的div，其透明度爲.5。

<div class="backgroundOpacity"> 
    My Epic Content 
</div> 
<br/> 
<div class="backgroundDiv"> 
    <div id="background"> </div> 
    My Other Epic Content 
</div> 
.backgroundOpacity { 
background-color:rgba(0,0,0,.5); 
} 
.backgroundDiv { 
    position:relative; 
} 
#background { 
position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color:#000; 
    opacity: .5; 
}

http://jsfiddle.net/thomas4g/vVt8D/1/

來源

2011-06-22 21:37:14

感謝Man ！答案比接受的答案更有效率和更好。 – Shuddh

簡單和兼容的解決辦法是刪除所有opacity和使用：支持rgba將使用第二background聲明與rgba

#outer { 
    background: url(50%-transparent-white.png); 
    background: rgba(255,255,255,0.5) 
}

瀏覽器。
瀏覽器that do not將忽略第二個background聲明並使用.png。

_{的.png不會工作在IE6，但這是unlikely是一個問題。如果是，it can be resolved。}

另一種方法在這裏詳細描述：

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

來源

2011-06-22 21:48:01 thirtydot

現代瀏覽器可以使用'background：rgba（255,255,255,0.5）'，不需要'.png'。 – thirtydot

你可以設置你的外層div這樣

background-color: rgba(0, 0, 0, 0.8); opacity: inherit;

來源

2013-05-14 10:23:50 i4snow

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

來源

2013-09-15 14:41:35

這可以通過完成訣竅，這很容易，這裏是H. ow：

你想採取透明div之外的文本，這是通過讓另一個div坐在位置：relative;

來源

2018-02-14 01:36:00 Hadi

感謝您花時間提供答案。這是因爲像你這樣有幫助的同伴，我們可以一起學習社區。這裏有一些關於如何讓你的答案很好的技巧：[我如何寫出一個好答案]（https://stackoverflow.com/help/how-to-answer）。 – Brien

如何保持文本的不透明度100時，它的父容器是50

回答

相關問題