javascript - 이와 유사한 기능을 구현하기 위한 아이디어

Question

1. DIY 휴대폰 케이스 웹사이트
http://www.xyppt.com/app/html/index.html?businessld=121
아래에 여러 사진이 있습니다. 사진을 클릭하면 휴대폰 케이스의 사진이 변경됩니다.

Answer 1

프론트 엔드의 휴대폰 케이스에 [PS]가 필요한 기본 데스크탑 배경화면 사진이 여러 장 있다고 가정해 보겠습니다. 간단한 아이디어는 다음과 같습니다.

1. [휴대폰 케이스 마스크 그림]을 디자인하고, 휴대폰의 속이 빈 윤곽선을 그리고, 뒷면의 카메라, 버튼 등의 위치를 ​​채워봅시다.

2. 배경화면 이미지에 마스크 이미지를 오버레이한 다음(z-index가 더 높은지 확인) JS/CSS를 사용하여 아래 배경화면 이미지를 동적으로 변경합니다.