CSS에서 image-mask 속성을 시뮬레이트하는 방법을 찾으려고합니다. 현재 대부분의 브라우저에서 사용할 수 없습니다. 작동 할 수있는 JavaScript 라이브러리가 있습니까?스토어에 맞춤 미리보기 만들기
버클 모양의 투명 공간이있는 흰색 이미지를 만들어서 버클을 수행 한 다음 배경색을 설정하여 이미지가 투명한 부분 만 배경색으로 표시하는 방법을 알아 냈습니다. 문제는, 각 부분마다 그렇게 할 수 없다는 것입니다. 왜냐하면 당신이 보지 않아야 할 흰색 가장자리가 그 뒤에있는 부분의 색상에 대해 보이기 때문입니다 (검은 색 사각형이있는 경우처럼 그 기술에 빨간 동그라미를 얻으려면 검정색 사각형의 흰색 사각형에 빨간 원이 생깁니다.)
색인이 붙은 투명성을 사용하는 것처럼 들리지만 PNG 이미지를 사용하는 것이 좋습니다. 대신 8 비트 알파 채널이 필요합니다. 그렇다면 < img/\ 7gt; 항목 (즉 벨트 용 벨트, 버클 용 벨트 등)의 각 구성 요소에 대해 절대 위치 지정을 사용하여 각 요소를 다른 요소 위에 직접 배치하십시오. 8 비트 투명도로 모든 것이 올바르게 보이도록 할 것입니다.
물론 선택한 색상/디자인의 각 이미지를 스왑 아웃하려면 일부 클라이언트 스크립팅이 필요합니다.
또 다른 옵션은 주어진 매개 변수를 기반으로 이미지를 동적으로 생성하는 서버 측 프로세스를 사용하면 HTML이 단순 해지지 만 방문자가 더 느려지므로 스크립팅을 지원하지 않는 클라이언트의 경우 대체로 사용할 수 있습니다 .
다음은 데모입니다. http://jsfiddle.net/Q77WL/ 빨간색 사이의 공백을 확인하십시오. 나는 그것이 그것을 고칠 것이라고 의심한다. 나는 css로 부품의 색상을 바꿀 수 있어야한다. (결국에는 인라인되지 않을 것입니다.) 또한,이 부분 위에는 빨간색을 부분적으로 덮을 더 많은 레이어가 있습니다. (맞춤 팔찌를 팔려고합니다.) 고마워요, 이안 – Ian
** 편집 : 나 자신을 다시 생각해 보도록하겠습니다. 배경 색상을 포함 할 수있는 방법이 필요하고 현재의 흰색 장소는 투명하게 유지해야합니다. 나는 그것이 그것을 조금 더 잘 설명한다고 생각한다. ** – Ian
코드를 게시 할 수 있습니까? –