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值。

CSS不透明度不会覆盖

1 个答案: