Блог

У меня на моей веб-странице в формате html есть изображение рубашки, и я хочу, чтобы можно было показывать скрытое изображение на рубашке нажатием кнопки, однако я хочу, чтобы оно стало частью рубашки, как если бы это был скрытый слой photoshop, так что, по сути, при нажатии кнопки на самой рубашке менялись разные рисунки, можно ли это как-то сделать или у изображения всегда будет квадратный фон?

Спасибо,

Как насчет того, чтобы сделать ваше «изображение рубашки» фоном для div и внутри него div иметь img атрибут, src для которого вы меняете с помощью простого javascript. Взгляните на эту идею:

HTML

 <div id="shirtimagebackground">
 <img id="overlay" src="overlayX.png"/>
</div>
  

CSS

  #shirtimagebackground {
  background-image: url(shirt.png);
  width: Xpx;
  height: Ypx;
 }
 #overlay {
  width: 100%;
  height: 100%;
 }
  

Вам нужно использовать комбинацию javascript и абсолютно позиционированного скрытого изображения с использованием css.

Это изображение должно быть .png с прозрачностью apha.

Имейте в виду, что Internet Explorer 6 не поддерживает прозрачность, поэтому, если этот браузер для вашей целевой аудитории, включите «исправление png», например, DD_belated.

Вы можете создать прозрачный фон со сплошными изображениями сверху и поместить изображение поверх изображения на вашей футболке. Однако не все инструменты позволяют это сделать (например, paint от Microsoft не предоставляет такой функциональности). Один из бесплатных инструментов с открытым исходным кодом, который я использовал ранее и который обладает такой функциональностью,Paint.net . Посмотрите на «Прозрачность — Альфа», если вы используете эту программу paint.