IE와 FF에서 달리 보이는 png - 아임웹 전문가찾기

Share Tips & Tech

각종 팁&정보를 나누는 곳입니다.
누군가에게 도움이 된다 싶으시면 언제라도 포스팅 :)

글 등록하기 | 내글 관리하기 | 연재글 | 보관함

IE와 FF에서 달리 보이는 png

2007.11.22 01:57 조회 수

4311

이온디

첨부파일 https://imweb.eond.com/webtip/156030

$IE에서 보는 png|fk010000000001.gif|width=\$ '이온디e블로그' 부분을 살펴보세요. 위의 그림에서 알 수 있듯이 png 파일은 IE와 Firefox 에서 그 색상이 조금 차이가 납니다. 일반적으로 png 파일은 IE에서 살짝 어둡게 표현이 됩니다.
익스플로러는 8비트의 PNG 색상값조차 제대로 표현을 못하고 있습니다.
그래서 위에서와 같이 이미지와 배경색상값을 맞추기 위해 IE와 FF에서 동일한 색상을 표시해줘야 할 때는 PNG보다는 GIF 등의 이미지 파일로 표시해주어야 합니다.

추가 검색키워드 : PNG, 익스, 파폭, 파이어폭스

관련글
1) 브라우저에 따른 색상차
2) 같은 색상값의 png 와 gif 파일이 각각 다른 색상으로 나타나고 있어요.
3) png 알파값 적용해서 보여주는 다른 방법
4) png 알파값따라 출력하기;;
[#M_ more.. | less.. |

브라우저에 따른 색상차 [출처:미니위니 질문&답변]
http://miniwini.com/miniwinis/bbs/index.php?bid=qna&mode=read&id=51201

플래시에서 png 임포트!! 미니위니 고수님들 질문드립니다ㅜㅜ;
같은 png나 gif 이미지 인데요.
오페라나 파이어폭스 보다 익스가 더 어둡게 나오는데 무슨 이유 있나요?
같은 배경 png 로 만들어진 두 페이지를 각각 다른 브라우져 띄워서
화면 캡쳐해서 포토샵 스포이드로 찍어보니 다른 값이 나와요.

24비트 문제는 아니고 그냥 IE가 8비트 png도 색 제대로 표시 못하는 문젭니다.(미묘하게)
IE일때 다른 이미지로 표시해주는 것외엔 해결 방법도 없고요.

같은 색상값의 png 와 gif 파일이 각각 다른 색상으로 나타나고 있어요. [출처:미니위니 질문&답변]
http://miniwini.com/miniwinis/bbs/index.php?bid=qna&mode=read&id=49755

이번에 제작하게된 홈페이지에서 배경과 플래시가 연결이 되야하는부분인데요
플래시에 투명도가 들어가지않고 배경의 일부분을 짤라서 삽입해야 하는 부분입니다
이부분과 배경이 부드럽게 연결이 되야하는데 플래시에서 배경 자른부분을 png(투명도가 있어서
jpg와 gif는 안됨)로 임포트 시켜서 웹에 띄어보면 색이 맞질 않아요..ㅜㅜ;;
배경이미지를 모두 플래시로 임포트시켜 png로 익스포트시켰지만 1픽셀씩 공백이 생겨서
틀이 맞지 않네요.. 플래시에서 0.1씩 작게해서 제작해도 마찬가지고요
이문제 때문에 미칠것같습니다..ㅠㅠ
제가 플래시 입문한지 얼마 되지않아서 이리저리 부딫히는 문제가 많습니다.
미니위니의 고수님들 제발 해결책 좀 알려주세요
여러분들은 이런부분 어떻게 처리하나요..
왠만하면 그런부분 피할려고 하는데 어쩔수 없이 부딫히는 부분이 생기네요
png임포트시 색상변하지 않게 하는방법은 없는걸까요?
혹시 플래시cs3(어도비에서 출시)로 제작하면 이런문제가 생기지 않을까요??

png가 gif나 jpg에 비해 색이 좀 어둡습니다.
위의 이미지에선 반대인거 같지만.... 아무튼 차이가 좀 납니다.
색상차가 생길 수 있다는 전제하에 작업을 하시는게 좋습니다.

그리고 플래시에선 이미지가 잘 뒤틀리기 때문에, 색상외에도 문제가 잘 생기므로
플래시 경계와 이미지 경계를 맞춰야 하는 작업은 애초에 피하는게 좋습니다.

배경은 이미지로 깔고 그위에 투명 옵션을 준 플래시를 올려서 오브젝트만 보이는 식으로 하면 될겁니다.

png 알파값 적용해서 보여주는 다른 방법 [출처:미니위니 알짜게시판]
http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=3875

이미 무화님의 팁이 있긴 하지만 또 다른 방법을 찾아내 글을 씁니다.
포토샵에서 저장된 png포멧이 익스에서는 항상 어둡게 나와서 해결방법을 찾다가 발견한 방법입니다+_+
(하지만 정작 필요한 색이 어두운거 고치는건 못찾았음;)

이렇게 쓰시면 됩니다. img대신에 embed태그를 쓰는거에요.
<embed src="image.png" width="9" height="24" align="absmiddle" type="image/png">

앞부분에 뭐 써줄거 없이 이 한줄만 써주면 되고요...
알파값 들어가야 하는 그림이 많이 필요하지 않다면 이 방법도 괜찮을 듯 합니다.

※내용추가 : 방금 확인해 봤는데 일부 IE에선 안 먹네요. 참고하세요.

출처 : PHPSCHOOL 맥핑키님

png 알파값따라 출력하기;; [출처:미니위니 알짜게시판]
http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=3042

제목을 모라고 해야할지 모르겠네요^^;

이전에 onload 이벤트로 바꿔주는 것이 있었고
스턀 속성에 길게 써주는 것등이 있었는데

첫번째 방법은 이미지 로딩이 완료되면 바꿔주는거라 깜박거리는 문제점이 있고
두번째 방법은 불편해서 다른 방법으로 시도해봤습니다

미리보기

문서 윗부분에

<style>
.png24 {
tmp:expression(setPng24(this));
}
</style>
<script>
function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,'');
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
obj.src='';
return '';
}
</script>

써주시고
이미지 태그 클래스 속성에 png24 써주시면 됩니다.
<img class="png24" src="test.png">

그럼 즐거운 한주 보내세요^^;

_M#]

첨부파일

Total 683 articles in 48 / 57 pages

	제목		날짜
119	[브라우저] 오페라 브라우저 사용시 변경할 사항	10726	2008/07/31
118	[기본] Aspire 5572ANWXCi 설치 드라이버	10756	2010/06/03
117	[모바일] 반츄 키보드	10853	2012/05/02
116	[기타] 지메일 알림, Gmail Notifier Plus	10912	2010/11/16
115	[기본] USB 보안 프로그램	10928	2010/05/02
114	[윈도우] Windows 사용자(Users), Program Files, Program Files (x86) 폴더 D드라이브로 이동시키기 [1]	10930	2013/06/22
113	[기타] 주변기기 > 프린터 > hp Deskjet 600k	10941	2005/03/04
112	[하드웨어] 노트북 키맵핑	10952	2009/12/17
111	[X61] 빨콩이 저절로 움직인다	10952	2009/01/01
110	[네트워크] wol 기능을 이용해서 원격 접속하기	10977	2008/08/20
109	[웹로그] 해당 디렉토리의 하위 디렉토리별 용량 알아보기	11016	2010/08/17
108	[윈도우] 윈도우8 부팅 시 부팅 선택모드 복구메뉴 추가하기	11051	2013/06/24