내 PNG 아이콘의 깃털 이미지 가장자리가 배경 이미지 위에 멋지게 렌더링되지 않습니다.

Question

이 질문이 적용됩니다 .- 새 질문에 대한 내 질문에 대한 답변을 게시 할 수 없습니다. 두 개 이상의 파일이 있고 잘못된 파일 경로를 사용하고있었습니다. 사용자 오류 :-)

MailChimp의 이메일 템플릿을 사용하고 있으며 톱니 바퀴 아이콘 대신 제목 표시 줄에 클라이언트 로고를 사용하고 있습니다. 내 로고가 하단 가장자리가 둥글게 표시된 원형의 간단한 형태로 원래의 기어 아이콘이 표시됩니다. 내가 PS에서 볼 수 Yuk http://dl.dropbox.com/u/1585739/bze_html_nl/images/Yuk.png

원 및 기어가 지금까지 매우 유사 RGBA 값이 : 나는 the browser에로드 할 때 I'm not allowed to post images yet http://dl.dropbox.com/u/1585739/bze_html_nl/images/header-bg%20with%20gear%20and%2072px%20circle.jpg

는 그러나 나는이 얻을.

나는 이것이 어떤 종류의 CSS 그림자 효과라고 생각하지 않지만 왜 찢어지고있는 것일까 요? (나는 30 년 동안 Design and DTP를하기 전에 웹 작업을 많이 해본 적이 없다. -

이 그렇게 그 '기준'적용하는 HTML 이메일 :-)

HTML/CSS Source

< 것을 기억하십시오! EDIT -> 여기에 원본 "gear"이미지에 link이 있습니다. alpha가있는 .png이며 .gif btw가 아닙니다. Gear http://dl.dropbox.com/u/1585739/bze_html_nl/images/19gear.png 내 PNG file 알파로 만든에서 PS : 당신이 빛 배경이 있었고, 당신이보고있는 후광 부분이 불투명 한 것을 것처럼 PNG file http://dl.dropbox.com/u/1585739/bze_html_nl/images/bze-72px.png

Answer 1

나중에 제공하는 이미지가 원의 가장자리에 흰색 물건이있는 위치를 표시 한 사이트와 다른 ..

어두운 배경에서 두 이미지를 표시합니다. jsfiddle - jsbin (jsfiddle is being slow..)

왼쪽 원 = The one in this url - 여분의 흰색 물건이 있습니다.

오른쪽 원 = The one you gave later on as the "PNG file" - 여분의 흰색 물건이 없습니다.

---

결론는 잘못된 이미지를 사용하고 있다는 것 ..

Answer 2

나에게 보인다. 이 부분을 김프에로드하고 Color to Alpha를 사용하여 해당 부분이 이미지에 영향을주지 않도록하십시오.

또한 png라고 말했지만 gif (내가 의심하는)를 사용하는 경우 하나의 투명 색상 만 지원하므로 견고한 등판으로 하드 스프라이트를 사용할 때 나타나는 문제와 똑같이 보입니다. 바탕색 (팔레트의 투명한 항목)을 선택하고 이미지의 크기를 조정합니다. 대부분의 그래픽 응용 프로그램은 크기가 조정 된 이미지를 부드럽게 처리하므로 프린지 주변의 픽셀이 더 이상 투명 팔레트 항목을 사용하지 않습니다.