兩個圖像在彼此的頂部

當我通過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我很抱歉，但我的回答是一樣的，我不知道你只是想要的代碼。 –

兩個圖像在彼此的頂部

回答

相關問題