Question

当我通过Ajax接收新数据时，我正在使用AngularJS创建一个新表（带ngRepeat）。每个表行的一部分是图像。

在某些条件下，我想在主图像的顶部显示叠加图像（除了指示条件的图标以外，大部分是透明的）。

我目前正在使用js解决方案，通过为图像的加载事件指定处理程序（获取主图像的位置并将叠加图像设置到相同位置）。这有效但我必须使用$ apply来确保在我附加load事件之前所有图像都是在DOM中构建的。

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

ETA：这是表格中的相关代码片段（在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;}

Answer 2

嗯，有一个想法是你可以将第一个图像作为封面背景加载到div并在该div中加载第二个图像，高度为：100％。

修改

我意识到当你通过ajax加载时，这也需要js。第二个想法是你可以将两个图像放在同一个div中，高度为100％，绝对位置和top，left设置为0，相对于父div？

两个图像在彼此的顶部

2 个答案: