Текст все еще применяет прозрачность. CSS

Question

У меня есть текст на прозрачном фоне, как показано здесь:

http://jsfiddle.net/L9ggc06c/

Однако текст по-прежнему применять прозрачность.

#content a:hover .text p{ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    opacity:1.0 !important; 
    color:#FFF; 
    font-family: 'ralewayregular'; 
    font-size: 200%; 
    text-transform: uppercase; 
    overflow:hidden; 
    position: relative; 
    z-index: 50; 
    text-align:center; 
    height:100%; 
    width:100%; 
    margin-top: 20px; 
} 
#content a:hover .text { 
    display:block; 
    position:absolute; 
    top:50%; 
    left:0; 
    height:75px; 
    width:100%; 
    margin-top: -37px; 
    background-color: rgb(0,0,0); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
    opacity: 0.7; 
} 

Я дал <p> тег position:relative и z-index: 10, который решил мою последнюю ситуацию. Однако на этот раз этого не произошло. Любая помощь будет оценена по достоинству.

Answer 1

Детский элемент имеет 100% прозрачности 70%, который имеет его родительский элемент. Это ожидаемое поведение. Вам нужно будет использовать абсолютное позиционирование в абзаце и сделать его элементом-братом, чтобы вывести его за пределы влияния родителя.

Demo

#content .text { 
    position:absolute; 
    top: 50%; 
    left: 0; 
    right: 0; 
    ... 
    opacity: 0; 
    transition: all .3s; 
} 
#content a:hover .text { 
    opacity: 1; 
} 

Answer 2

Использование RGBA() для вывода фона непрозрачности.

вы можете сделать что-то вроде этого:

#content a:hover .text p{ 
color: #fff; 
} 
#content a:hover .text { 
background-color: rgba(0,0,0, 0.2); 
} 

Answer 3

Opacity устанавливает все содержимое DIV с непрозрачностью. Вы можете попробовать что-то вроде этого:

<div class="overlay"> 
    <div class="blackBar"></div> 
    <a>Overlay text</a> 
</div> 

Это просто демо, вам придется применить это к вашему делу!