html - 两个图像在彼此之上

Question

当我通过 Ajax 接收新数据时，我正在使用 AngularJS 创建一个新表(使用 ngRepeat)。每个表格行的一部分是一张图片。

在某些情况下，我想在主图像的正上方显示叠加图像(除了指示条件的图标外，它大部分是透明的)。

我目前正在使用一个 js 解决方案，通过为图像的加载事件分配一个处理程序(获取主图像的位置并将覆盖图像设置到相同的位置)。这行得通，但我必须使用 $apply 来确保所有图像都在 DOM 中构建，然后才能附加加载事件。

我想知道是否有纯 html/css 的解决方案？只需确保叠加图像始终位于与主图像完全相同的位置即可。我可以简单地将 ngShow 绑定(bind)到条件并避免所有 js 技巧。

预计到达时间:这是表中的相关代码片段(在 ngRepeat 中):

<div class="movie-cover">
    <img class="movie-image" ng-src="{{movie.ImageUrl}}" onerror="this.src='@Url.Content("~/Content/images/titleimages/NoImage.jpg")'" />
    <img class="selected-image dontshow" src="@Url.Content("~/Content/images/Selected.png")" data-hh-id="{{movie.ID}}" />
    <a class="movie-link" href="{{movie.ImdbUrl}}" target="_blank">IMDb</a>
</div>

我想要带有类“selected-image”的图像在另一个图像之上。

Answer 1

试一试:

.movie-cover {position:relative;width:400px;height:400px;}
.movie-cover img {position:absolute;top:0;left:0;}