накладывать одно прозрачное изображение на другое с помощью JavaScript

Question

Можно ли в javascript накладывать прозрачное фоновое изображение на другое изображение?Допустим, у вас есть веб-сайт с кучей изображений продуктов, штучек, виджетов и т. Д., И некоторые из этих продуктов были отозваны производителем, и на эти изображения нужно наложить знак «Не вводить» (кружок сзначок косой черты) - прозрачно, поэтому исходное изображение все еще просвечивает.Это может быть сделано?Цель состоит в том, чтобы не редактировать изображения.

Я иду по правильному пути, чтобы поместить прозрачное фоновое изображение в DIV без непрозрачности и изменить размер прозрачного фонового изображения и его контейнера DIV в соответствии с размером исходного изображения, используя clientWidth и clientHeight,и затем поместите DIV поверх исходного изображения?Если размер окна изменяется, а компоновка изменяется динамически, как / когда будет указано, что наложенный DIV будет перемещен в новое местоположение исходного изображения?Нет ничего похожего на LayoutChangedEvent?Нужно ли повторно проверять позицию исходного изображения с помощью setInterval?

Answer 1

Вам не нужен Javascript для этого, вы можете легко сделать это с помощью CSS.

Пример ниже очень прост. Если вы оберните изображение продукта в элемент контейнера и установите для этого контейнера значение position: relative, то вы сможете расположить дочерние элементы относительно этого контейнера. Таким образом, если размер окна изменяется, это не имеет значения.

Просмотр рабочей демонстрации на jsFiddle: http://jsfiddle.net/VNqSd/2/

HTML

<div class="container">
  <img src="http://nontalk.s3.amazonaws.com/product.png" 
       width="100" height="100" />
  <img src="http://nontalk.s3.amazonaws.com/overlay.png" 
       class="overlay" width="100" height="100" />
</div>

CSS

.container {
  position: relative;   
}
.overlay {
  position: absolute;   
  left:0;
  top: 0;
  z-index: 999;
}