两个图像在彼此的顶部

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

在某些情况下，我想要在主图像的顶部显示覆盖图像（除了指示条件的图标外大多透明）。

我目前正在使用js解决方案，为图像的加载事件分配一个处理程序（获取主图像的位置并将覆盖图像设置为相同的位置）。这有效，但我必须使用$应用来确保所有图像都在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”的形象。

来源

2014-02-09 Harald

你能分享截图或摆弄？ –

试试这个：

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

来源

2014-02-09 03:59:20

这很有效。我仍然有时会遇到css定位问题，但是您的相对和绝对作品的组合。谢谢！ – Harald

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

编辑

我认识到这一点，还需要JS，你是通过AJAX加载它。第二个想法是，你可以把两个图像放在同一个div，高度为100％，绝对位置和顶部，左侧相对于父div设置为0？

来源

2014-02-09 03:47:32

这听起来像个好主意。然而，图像链接是动态的，并且是我收到的json数据的一部分。您的建议仍然可以使用动态链接？ – Harald

它应该很好，因为第二个选项是纯CSS。但是我必须问，叠加图像与主图像尺寸是否相同？你可以分享一个截图让它更容易理解。 –

@Harald我很抱歉，但我的回答是一样的，我不知道你只是想要的代码。 –

两个图像在彼此的顶部

回答

相关问题