html – 透明的div,但不透明的文字

发布时间：2020-12-14 19:35:32 所属栏目：资源来源：网络整理

导读：我有以下 HTML代码,它只显示一个包含文本的透明黑色叠加图像. 我不会让我的文字变得透明.我尝试使用z-index,但我的文本仍然是透明的：我的代码有什么问题？这是我的HTML： div class="leftContainer" div class = "promo" img src="images/soon.png" width

我有以下 HTML代码,它只显示一个包含文本的透明黑色叠加图像.

我不会让我的文字变得透明.我尝试使用z-index,但我的文本仍然是透明的：

我的代码有什么问题？

这是我的HTML：

<div class="leftContainer">
    <div class = "promo">
         <img src="images/soon.png" width="415" height="200" alt="soon event" />

         <div class="hilight">
             <h2>Hockey</h2>
             <p>Sample text</p>
         </div>

     </div>

     ...

</div>

这是我的css：

.hilight h2{
    font-family: Helvetica,Verdana;
    color: #FFF;
    z-index: 200;
}

.promo {
    position: relative;
}
.promo img {
    z-index: 1;
}

.hilight {
    background-color: #000;
    position: absolute;
    height: 85px;
    width: 415px;
    opacity: 0.65;
    font-family: Verdana,Geneva,sans-serif;
    color: #FFF;
    bottom: 0px;
    z-index: 1;
}

解决方法

将.hilight的背景更改为rgba(0,0.65)并删除不透明度.

.hilight {
 background-color: rgba(0,0.65);
 position: absolute;
 height: 85px;
 width: 415px;
 font-family: Verdana,sans-serif;
 color: #FFF;
 bottom: 0px;
 z-index: 1;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!