15

我有以下 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;
}
4

4 回答 4

27

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

.hilight {
 background-color: rgba(0,0,0,0.65);
 position: absolute;
 height: 85px;
 width: 415px;
 font-family: Verdana, Geneva, sans-serif;
 color: #FFF;
 bottom: 0px;
 z-index: 1;
}
于 2013-05-21T20:42:04.917 回答
3

您只需将不透明度设置为背景，而不是整个 div 及其内容。您可以通过rgba颜色选择来做到这一点，例如

div {
   background: rgba(0,0,0,0.50);
}

另一种方法是使用png带有一些background-position. 这将是多浏览器兼容的

于 2013-05-21T20:44:14.473 回答
3

对于跨浏览器支持，请使用透明的 1x1 像素 png 图像来执行此操作。
您可以在此站点上生成图像：http
://www.1x1px.me/ 然后只需删除background-color并opacity简单地使用background:url(bg.png);

jsFiddle 现场演示

于 2013-05-21T21:02:38.147 回答
0

里面的所有东西都将具有 0.65 的不透明度。将文本移到覆盖 div 之外。

于 2013-05-21T20:42:30.120 回答