透明なdivが正しく動作しない

Question

透明なプロパティを持つdivを追加しようとしています。

.products 
{ 
    width:280px; 
    height:320px; 
    float:left; 
    background:#fff; 
    margin:5px; 
} 
.products:hover 
{ 
    -moz-box-shadow: 0 0 5px 5px #ccc; 
    -webkit-box-shadow: 0 0 5px 5px#ccc; 
    box-shadow: 0 0 5px 5px #ccc; 
} 
.p_desc 
{ 
    height:120px; 
    background:#666; 
    opacity:0.6; 
    filter:alpha(opacity=60); 
} 

HTML：

<div class="products"> 
       <img src="css/images/products/3m_1440.jpg" /> 
        <div class="p_desc">This is a good product</div> 
       </div> 

画像サイズが280x320pxです。私はクラスp_descがproductsの中で透明になることを期待しています。しかし、その結果はその透明ですが、それはあふれているproductsではありません！

Answer 1

あなた.p_descにposition:absoluteを与えます。

書き込みこの：

.products 
{ 
    width:280px; 
    height:320px; 
    float:left; 
    background:#fff; 
    margin:5px; 
    position:relative; 
} 
.p_desc 
{ 
    height:120px; 
    background:#666; 
    opacity:0.6; 
    filter:alpha(opacity=60); 
    position:absolute; 
    bottom:0; 
    left:0; 
    width:100%; 
} 

Answer 2

このcode.Iを通過してください、それがあなたの問題を解決していただければ幸いです。 http://jsfiddle.net/4hLnZ/12/