CSS不透明度不会覆盖

Question

我有这个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类的不透明度,它看起来很凶.我在这方面有任何错误或这是一个常见问题吗？

如果你知道一个解决方法我会非常感激:)谢谢!

Answer 1

这是"常见问题".

您应该使用带有alpha的CSS3背景颜色而不是不透明度:

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

看看这个网站

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

编辑:当然你应该改变你的rgba值.