叠加<a> with semi-transparent PNG</a>

Question

我有很多锚标签，每个标签都包含一个缩略图：

<a href="..." class="movie_poster_item" id="movie_poster_item_6">
    <img src="..." height="267">
</a>

我想在缩略图顶部（锚标记内）叠加这个半透明图像（poster-info-overlay.png）：

但我不确定使用哪种方法; append（），before（）或after（）。有人可以建议正确的方法吗？我显然需要以某种方式设置z-index，具体取决于我正在使用的方法。

到目前为止，这是我的jQuery代码：

$('a.movie_poster_item').mouseenter(function() {
    $(this)...
});

Answer 1

就我个人而言：

<a href="..." class="movie_poster_item" id="movie_poster_item_6">
    <div class="overlay"></div>
    <img src="..." height="267">
</a>

然后是js：

$('.movie_poster_item').hover(function() {
  $(this).find('.overlay').show();
},
function() {
  $(this).find('.overlay').hide();
};

确保叠加层的z-index高于img，例如：

.movie_poster_item .overlay { position: absolute; z-index: 2; }
.movie_poster_item img { position: relative/absolute; z-index: 1; }

Answer 2

您可以将半透明图像作为标记的背景，如下所示：

$(this).css('background','url(poster-info-overlay.png) 0px 0px no-repeat');