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

这是“常见问题”。

您应该使用带 alpha 的 CSS3 背景色，而不是不透明度：

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

看看这个网站

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

编辑：当然你应该用你的改变这个 rgba 值。

于 2012-09-26T09:10:43.030 回答