透明 div 无法正常工作答案

【问题标题】：Transparent div not working properly透明 div 无法正常工作
【发布时间】：2012-01-29 00:58:52
【问题描述】：

我正在尝试添加一个具有透明属性的 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，它溢出了！

【问题讨论】：

所以描述应该完全覆盖图像？还是你想把它放在顶部/底部？
问题的标题有点误导，因为 div 是透明的并不影响布局问题。

标签： html css opacity transparent

【解决方案1】：

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

【讨论】：

【解决方案2】：

将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%;
}

【讨论】：