html - 画像上の透明な div と不透明なテキスト

Question

テキストを含む透明な黒いオーバーレイで画像を表示する次の 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;
}

score 27 · Accepted Answer

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

score 3 · Accepted Answer

クロスブラウザーのサポートには、透明な 1x1 ピクセルの png 画像を使用してこれを行います。
このサイトで画像を生成できます: http://www.1x1px.me/
次に、削除background-colorしopacityて使用するだけです。background:url(bg.png);

jsFiddle ライブデモ

score 3 · Accepted Answer

不透明度は、div 全体とそのコンテンツではなく、背景のみに設定する必要があります。rgbaたとえば、色の選択でこれを行うことができます

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

それを行う他の方法は、半透明のpng画像をいくつかのbackground-position. これはマルチブラウザと互換性があります

score 0 · Accepted Answer

内部のすべての不透明度は 0.65 になります。テキストをオーバーレイ div の外に移動します。

html - 画像上の透明な div と不透明なテキスト

4 に答える 4

Related

Reference