два изображения друг на друга

Я использую AngularJS для создания новой таблицы (с ngRepeat), когда я получаю новые данные через Ajax. Часть каждой строки таблицы - это изображение.два изображения друг на друга

При определенных условиях я хочу отображать оверлейное изображение (которое в основном прозрачно, за исключением значка, указывающего условие) прямо поверх основного изображения.

В настоящее время я использую решение js, назначая обработчик события загрузки изображения (получая положение основного изображения и устанавливая изображение наложения в ту же позицию). Это работает, но я должен использовать $ apply, чтобы убедиться, что все изображения построены в 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% с абсолютным положением и сверху, а слева - 0 относительно родительского div?

источник

2014-02-09 03:47:32

Это звучит неплохо. Тем не менее, ссылка на изображение является динамической и частью данных json, которые я получаю. Возможно ли ваше предложение с динамическими ссылками? – Harald

Он должен работать нормально, поскольку второй вариант - чистый css. Но я должен спросить, имеет ли оверлейное изображение те же размеры, что и основной образ? И можете ли вы поделиться снимком экрана, чтобы сделать его более понятным. –

@Harald Прошу прощения, но мой ответ был таким же, я не знал, что вам нужен код. –

два изображения друг на друга

ответ

Смежные вопросы