이미지에 마스크 처리를 하는 방법입니다.

두 가지  방법이 있는데, 첫 번째는 마스크이미지를 사용해서 적용하는 것이고, 두 번째는 스타일로 그라디언트를 만들어 적용하는 방법입니다.

우선 마스크이미지를 사용해서 적용하는 방법입니다.

재료는 마스크 처리할 원본 이미지와 마스크 이미지입니다.

 소스코드는 아래와 같습니다.

 <img src="images/sample01.jpg" style="-webkit-mask-box-image: url(images/sample01_mask.png) 75 stretch;">

sample01.jpg가 원본 이미지이고, sample01_mask.png가 마스크 이미지입니다.

적용되면 아래와 같이 보입니다.

두 번째 방법인 그라디언트 스타일을 이용하는 방법입니다.

 <img src="images/sample01.jpg" style="-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))">

마스크 이미지 없이 원본 이미지에 그라디언트를 적용합니다.

결과는 아래와 같습니다.

이제 간단한 마스크효과는 포토샵 없이도 처리가 가능하겠네요.

[출처] http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Masks/Masks.html#//apple_ref/doc/uid/TP40008032-CH8-SW8