css - 不透明度问题

Question

将鼠标悬停在图像上时，用户可以看到有关该图像的一些附加信息。之前它是透明的，但现在我不想让它变得透明。所以我删除了我的 css 中的 opacity 行。但随后街区焕然一新......

之前

之后

CSS

 #uicarousel-news-preview-block-1 .ui-carousel-item .views-field-title,
 #uicarousel-news-preview-block-2 .ui-carousel-item .views-field-title {
        height:35px;
        margin-top:-46px;
        background-color:green;
        padding-left : 30px;
        padding-right : 30px;
        opacity : 0.6;
        /*IE opacity*/
        filter:alpha(opacity=60);
        color: white;
        display: none;
    }

CSS 是否有问题，或者我必须做什么才能确保没有不透明度并且 div 仍在图像前面？

更新
这是 HTML。这是一个 Drupal 网站，绿色条是 views-field-title

Answer 1

这应该有帮助:

#uicarousel-news-preview-block-2 .ui-carousel-item .views-field-title
{
  ...
  position:relative; 
  /* z-index: ...; - if needed */
}