透明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在div products内透明。但结果是透明但没有products，它溢出！

Answer 1

将position:absolute提供给.p_desc。

写下这个：

.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

请仔细阅读此代码。我希望它能解决您的问题。 http://jsfiddle.net/4hLnZ/12/