1

画像のキャプションに次のCSSを使用しています。

#capt{
    position: relative; 
    height: 391px;
}

#capt > p.imgCaption{
    position: absolute;
    top: 348px;
    background-color: #56631e;
    opacity:0.6;
    left: 2px;
    filter:alpha(opacity=60); /* For IE8 and earlier */
    width: 547px;
    font-family: "HelNue";
    font-weight: bold;
    font-size: 17px;
    color: white;
    height: 25px;
    z-index: 99999;
    padding: 7px 0 0 5px;
}
span#op{
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
    z-index: 9999999;
}

そして、HTMLは次のとおりです。

<div id="capt">
  <p class="imgCaption">
      <span id="op">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
  </p>
  <img src="image here" />
 </div>

これで、配置とすべてが正常になり、bgの色が正常になり、不透明度が正常になりますが、テキストはimgCaptionクラスの不透明度を維持しているため、不透明に見えます。これでエラーが発生しましたか、それともこれは一般的な問題ですか？

あなたが回避策を知っているなら、私は私に最も感謝します:)ありがとう！

4

1 に答える 1

5

これが「よくある問題」です。

不透明度の代わりに、アルファ付きのCSS3背景色を使用する必要があります。

background-color: rgba(255,0,0,1);

このウェブサイトをチェックしてください

http://www.css3.info/introduction-opacity-rgba/

編集：もちろん、このrgba値を自分のものに変更する必要があります。

于 2012-09-26T09:10:43.030 に答える