그라데이션 배경으로 이미지를 마스크하는 방법은 무엇입니까?

Question

이미지가 있고 각 이미지의 2 각도를 제거하고 싶습니다. 제거 된 부분은 투명해야하며 이는 수정할 수 없습니다. 다음은 내가하고 싶은 것을 보여주는 2 개의 이미지입니다.

이것은 비어있는 이미지입니다. 흰색은 내가 보여주고 싶은 부분입니다. 파란색 부분은 문서 배경 그라디언트 색상을 표시합니다.

이 내가 마지막에 가야하는 것이다. 파란색 부분은 다시 문서 그라디언트 색상에서 투명합니다.

사람은 생각이있다?

Answer 1

웹 키트 브라우저의 경우 mask-box-image을 사용할 수 있습니다. 이미지 마스크 클래스와 사업부에 이미지를 넣고 다음 투명 PNG로 mask-box-image을 사용하여 항상 brillient CSS 트릭 웹 사이트에 훌륭한 기사가

.image-mask { 
    -webkit-mask-box-image: url(your_mask.png); 
} 

- http://css-tricks.com/webkit-image-wipes/

그것은 웹킷은 ​​불구의 내가 두려워.

Answer 2

일부 코드는 내 코드가 아닌 답변을 좋아하지 않지만 이미지 자체에서 해결할 수 있습니까? 이 제안에 대해 저를 미워하지 마십시오. 그러나 때때로 코드가 모두를 해결하지는 못합니다.

1. 이미지를 PNG로 저장하십시오.
2. Photoshop을 사용중인 경우 작업중인 레이어가 "배경"레이어가 아닌지 확인하십시오.
3. 후작 도구를 지우거나 사용하여 투명하게 만들 이미지 부분을 삭제하십시오. 후작 도구의 모서리를 흐리게 처리하여 "변색"시킬 수 있습니다.
4. Photoshop이나 다른 편집 프로그램의 설정에 따라 "투명"섹션은 회색과 흰색으로 체크 무늬가 있어야합니다.
5. 이미지를 PNG로 저장하고 코딩 된 마스크 대신 사용하십시오.

동적으로 이미지를로드하거나 이미지를 마스크하는 코드를 사용하는 다른 이유가 있지만 작동해야하는 경우 허용됩니다. 초기 버전의 IE에는 PNG에 몇 가지 문제가 있지만 현재 프로젝트의 IE9, IE8 또는 IE7에서는 발생하지 않았습니다.