如何用CSS創建不透明底層？

Question

我想添加一個不透明的襯底使用CSS。

你能幫我理解我做錯了什麼嗎？

CSS

popUp#translucent{ 
    width: 400px; 
    height: 100px; 
    background-color: black; 
    margin-left: auto; 
    margin-right: auto; 
    position:fixed; 
    opacity: .4; 
} 

popUp#content{ 
width:400px; 
height: 100px; 

} 
#popContainer{ 
width: 400px; 
height: 100px; 
display: visible; 
position: fixed; 
z-index: 1000; 
} 

HTML

<div id="popContainer"> 
    <popUp id="translucent"></popUp> 
    <popUp id = "content"> 
     <button class="btn large btn-custom" data-h="193" data-s="32" data-l="64" ,="" data-p="15">Alpha</button> 
    </popUp> 
</div> 

http://jsfiddle.net/CeRX3/

感謝

Answer 1

改變背景顏色爲灰色，並在半透明的不透明度爲0.1。它看起來更加半透明。

Answer 2

以下是使用CSS爲按鈕創建底圖的方法。

通過使用w3學校的代碼製作的這個fiddle。

HTML

<div class="background"> 
    <div class="transbox"> 
    <p>This is some text that is placed in the transparent box. 
    This is some text that is placed in the transparent box. 
    This is some text that is placed in the transparent box. 
    This is some text that is placed in the transparent box. 
    This is some text that is placed in the transparent box. 
    </p> 
    </div> 
    </div> 

CSS

div.background 
    { 
    width:500px; 
    height:250px; 
    background:url(http://www.w3schools.com/css/klematis.jpg) repeat; 
    border:2px solid black; 
    } 
div.transbox 
    { 
    width:400px; 
    height:180px; 
    margin:30px 50px; 
    background-color:#ffffff; 
    border:1px solid black; 
    opacity:0.6; 
    } 
div.transbox p 
    { 
    margin:30px 40px; 
    font-weight:bold; 
    color:#000000; 
    } 

您可以使用上面的代碼。在CSS中有不透明的問題。

CSS不透明的問題 當我們將子元素添加到此代碼 影響的html元素時，就會出現問題。所有子元素將繼承相同的不透明度設置，即使您嘗試 爲所有這些元素指定了完全不透明度（這對於執行 來說太麻煩）。

The Hacky Solution 我們該如何解決這個問題？在某些情況下，您可以使用絕對定位在視覺上模擬元素之間的親子關係，並且此 將解決該問題。 然後，如果你想解決你的問題，那麼你可能不得不使用一種解決方法的目的。