Question div transparent sur une image mais texte opaque


J'ai le code HTML suivant qui montre simplement une image avec un recouvrement noir transparent contenant du texte.

Je ne veux pas que mon texte soit transparent. J'ai essayé avec z-index, mais mon texte est toujours transparent:

Demo

Qu'est ce qui ne va pas avec mon code?

Ceci est mon 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>

et voici mon 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;
}

12
2018-05-21 20:39


origine


Réponses:


changez l'arrière-plan de .hilight en rgba (0,0,0,0,65) et supprimez l'opacité.

.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;
}

22
2018-05-21 20:42



Vous devez définir l'opacité en arrière-plan uniquement, pas la div entière et son contenu. Vous pouvez le faire avec rgba sélection de couleur par exemple

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

L'autre façon de le faire serait d'utiliser un semi-transparent png image avec quelques background-position. Ce serait alors compatible multibowser


2
2018-05-21 20:44



Pour un support inter-navigateur image transparente 1x1 pixel png pour faire ça.
  Vous pouvez générer l'image sur ce site: http://www.1x1px.me/
Ensuite, retirez simplement background-color et opacity et simplement utiliser background:url(bg.png);

jsfiddle Live Demo


2
2018-05-21 21:02



Tout à l'intérieur aura l'opacité de 0,65. Déplace le texte en dehors du div de superposition.


0
2018-05-21 20:42