Прозрачный div не работает должным образом - PullRequest
Новая
       23

Прозрачный div не работает должным образом

0 голосов
/ 28 декабря 2011

Я пытаюсь добавить 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, а переполнен!

enter image description here

Ответы [ 2 ]

2 голосов
/ 28 декабря 2011

Дайте 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%;
}
0 голосов
/ 28 декабря 2011

Пожалуйста, пройдите по этому коду. Надеюсь, это решит вашу проблему.http://jsfiddle.net/4hLnZ/12/

...