2012-03-18 1 views
0

배경을 특정 모양으로 제한하려고합니다.특정 모양 (예 : 다이아몬드 모양)의 배경 포함

예 : div 또는 img 태그가 정사각형입니다. 그런 다음 그 부분 (모서리)이 투명하고 일부가 중간에있는 다이아몬드가 특정 색 (배경색) 또는 특정 이미지 (배경 이미지)로 표시되기를 원합니다.

투명 다이아몬드가 중앙에있는 흰색 png 파일을 만들고 배경이 다이아몬드 모양으로 만 표시되도록 원하는대로 이미지의 배경을 설정하여이를 시뮬레이션 할 수 있습니다.

가장자리 주위에 흰색 부분을 없애고 싶습니다 (예 : 가운데에 흰색 다이아몬드가있는 투명 PNG가 있음). 그러나 배경은 가장자리에만 보입니다. 기본적으로 이미지의 배경이 이 아니며이 투명하지 않은 것을 나타내려면 이 투명하고은 투명해야합니다. 이 작업은 이미지로 수행해야한다는 것이 거의 확실합니다. 그러나 다른 옵션이 있다면 알려주십시오.

여기에 http://jsfiddle.net/r7jxm/의 예가 나와 있습니다. 모든 이미지의 가장자리가 투명해야하므로 아래 이미지는 보이지 않습니다. 나는 여전히 CSS로 배경색을 바꿀 수 있어야한다.

+1

흰색 부분을 제거하여 실제로 투명하게 만들어야합니다. 파일 끝 .png 만 있으면 문제가 해결되지 않습니다. Photoshop 또는 이와 유사한 프로그램이 있습니까? 그렇다면 원하는 조각을 그리고 나머지는 비워 두십시오. – justanotherhobbyist

답변

1

최상의 지원을 제공하지는 않지만 CSS masks가 존재합니다.

그들은 당신이 원하는 것을 얻는 것처럼 들립니다.

+0

와우! Safari에서만 작동한다는 점만 제외하면 완벽 할 것입니다. 나는 완전히 다른 접근법을 발견했을 수도 있지만 도움을 주셔서 감사합니다! – Ian