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

jobtbby3 于 11个月前发布在其他

关注(0)|答案(3)|浏览(84)

我有一个透明的背景上的文本，如下图所示：
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，这解决了我的最后一个情况。但它没有这一次。任何帮助将不胜感激。

css

来源：https://stackoverflow.com/questions/29237288/why-is-transparency-being-applied-to-my-text

3条答案

按热度按时间

x6yk4ghg1#

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

Demo

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

字符串

赞(0）回复(0）举报 11个月前

83qze16e2#

使用**rgba（）**输出背景不透明度。
你可以这样做：

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

字符串

赞(0）回复(0）举报 11个月前

t8e9dugd3#

Opacity将div的所有内容设置为opacity set。您可以尝试这样做：

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

字符串

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

赞(0）回复(0）举报 11个月前

我来回答

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

3条答案

相关问题

热门标签

最新问答