2011-09-20 9 views
3

여기 내 문제는 다음과 같습니다.새 색상의 오버레이 이미지

두 가지 톤의 png 이미지가 있습니다. 하나의 톤이 검은 색이고, 하나의 톤이 투명합니다.

현재 배경색 속성을 사용하여 투명 섹션의 색상을 동적으로 변경하고 있습니다.

또한 마스크 오버레이를 사용하여 검은 색 섹션을 동적으로 변경할 수 있기를 바랍니다. html5 canvas에서 가능하고 css라고 가정합니다. 그러나 작동하는 답변을 찾을 수 없었습니다.

도움 주셔서 감사합니다.

답변

1

는 웹킷 (만 웹킷은) 순수 CSS와 함께 할 수 있습니다. really, really, really not supported입니다.

몇 링크

당신이 관심을 가져야, 당신은 시작하려면 :

+0

기술적으로 이러한 문제가 해결되지는 않지만 최대한 해결책에 가깝습니다. 또한, 두 번째 링크 에서처럼 텍스트를 마스킹하는 것은 * 굉장합니다 *. – GAgnew

0

나는 당신을 올바르게 이해하기를 바랍니다.

html5 요소 캔버스를 사용하여 개별 픽셀까지 이미지를 바로 조작 할 수 있습니다.

은 참조를 위해이 사이트를보십시오 :이 시점에서

http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/

+0

안녕하세요, Decad, 답장을 보내 주셔서 감사합니다. 나는이 능력을 알고 있는데 이미 이미지를 마스킹하기위한 사전 정의 된 함수가 있는지 궁금해하고 있었습니까? – GAgnew

+0

죄송합니다. –

0

글쎄, 캔버스 당신은 jQuery를 취할 수 있다면, 가장 현대적인 브라우저에서 지원됩니다 해결책. 이 jquery 플러그인을 사용해 볼 수 있습니다.

$("#myImageID").tancolor(); 

대화 형 demo을있다 :로

명령은 매우 간단하고 쉽습니다. 당신은 그걸 가지고 놀 수 있습니다.

사용법에 대한 문서를 확인하십시오. 매우 간단합니다. docs

관련 문제