Прозрачный div над изображением, но непрозрачный текст

У меня есть следующий HTML-код, который просто показывает изображение с прозрачным черным наложением, содержащим текст.

Я не хочу, чтобы мой текст был прозрачным. Я пробовал с z-index, но мой текст по-прежнему прозрачен:

Demo

Что не так с моим кодом?

Это мой 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;
}

ОТВЕТЫ

Ответ 1

измените фон .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;
}

Ответ 2

Вам нужно установить непрозрачность только для фона, а не для всего div и его содержимого. Вы можете сделать это с помощью выбора цвета rgba, например

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

Другой способ сделать это - использовать полупрозрачный образ png с некоторым background-position. Это было бы совместимо с несколькими браузерами

Ответ 3

Для поддержки кросс-браузера используйте прозрачное изображение размером 1x1 пиксель для этого.
Вы можете создать изображение на этом сайте: http://www.1x1px.me/
Затем просто удалите background-color и opacity и просто используйте background:url(bg.png);

jsFiddle Live Demo

Ответ 4

Все внутри будет иметь непрозрачность 0,65. Переместите текст за пределы div.