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 28 / 57 pages

	제목		날짜
359	[기본] 판도라동영상 OpenAPI 사용후기 [1]	5962	2007/11/29
358	[웹로그] 손바닥에 땀, 어떻게 할까?	5964	2007/11/03
357	[웹로그] Play Street 에 참여할 의사가 있으신지요?	5964	2007/10/02
356	메인보드 전원 케이블 연결	5979	2008/08/30
355	[웹로그] 적당한 마우스 스크롤의 양	5985	2007/10/31
354	[사이트관리] Apache 서버 .htaccess 활용(접근 제어 - 아이피 제어)	5995	2014/02/09
353	[기본] 시작프로그램 관리 & 모니터링	5999	2007/10/21
352	[웹로그] 왜임마 사용하기 #1 [2]	6004	2007/11/27
351	[모바일] 갤럭시노트2(shv-e250s) 키스(스마트스위치)로 백업하기	6048	2016/02/05
350	[기본] 내 블로그에 Add to Diigo를 넣어보자 [2]	6056	2007/11/25
349	[웹로그] 컴퓨터 관련 팁을 올려놓은 블로거	6063	2007/11/05
348	[윈도우] SSD 드라이브 최적화	6079	2013/06/22