为什么我的文本要应用透明度？

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

我已经给出了段落

position:relative

和

z-index: 10

，这解决了我最后的情况。然而这次没有。任何帮助将不胜感激。

Answer 1

子元素的透明度是其父元素的 70% 的 100%。这是预期的行为。您需要在段落上使用绝对定位，并将其设为同级元素，以使其不受父元素的影响。

演示

#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>

这只是一个演示，您必须将其应用到您的案例中！