Question

我在透明背景上有文字，如下所示：

但是，该文本仍在应用透明度。

#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

子元素具有其父元素具有的70％透明度的100％。这是预期的行为。您需要在段落上使用绝对定位，并使其成为兄弟元素，使其超出父级的影响。

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

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

文字仍然适用透明度。 CSS

3 个答案: