저는 웹 페이지 제작 기술이 있기 때문에 IE6에서 반투명 PNG 파일이 표시 문제가 발생할 수 있다는 이야기를 오래 전부터 들었지만, 제가 직접 웹 사이트를 운영한 적이 없기 때문에 실제로 그런 문제를 접한 적이 없습니다.
올해 초부터 나만의 웹사이트를 구축하기 시작했습니다. 투명한 부분이 있는 png 그림을 사용하여 웹사이트 로고를 만들었습니다. 충분히 오래되었고 IE6을 고려할 필요가 없다고 생각했습니다. 어느 날 퇴근하고 돌아와 Google Analytics 백엔드를 열었을 때 실제로 IE6 방문이 전체 방문의 40%를 차지한다는 사실을 발견했습니다. 나는 충격을 받았고 웹사이트를 테스트하기 위해 인터넷에서 IE6의 그린 버전을 빠르게 다운로드했습니다. . 예상대로 로고는 완전히 불투명했습니다.
그래서 밤새도록 온라인에서 해결책을 찾았습니다. 일반적으로 온라인 방법은 CSS 필터, js, gif 교체 등을 포함하여 비교적 복잡합니다. 하지만 나는 항상 그것이 충분히 아름답지 않다고 느꼈습니다. 마침내 밤새 검색한 끝에 문제를 원활하게 해결하기 위해 두 문장의 js 코드만 필요한 방법을 찾았습니다. 다음에 공유해 볼까요
먼저 내 웹사이트에서 iepng.js를 다운로드하세요.
http: //www.***.com/templates/default/js/iepng.js
반투명 png를 배경으로 사용하는 웹사이트의 요소 ID가 로고인 경우 <head></head> 사이에 다음을 추가하세요.
| <!-- ie6 png 수정용 --> <script type="text/javascript" src="templates/js/iepng.js"></script> <script type=text/javascript> EvPNG.fix('#logo');</script> |
마지막으로 설명하자면, div ID foo의 배경으로 투명한 png를 사용하는 경우 다음과 같이 작성해야 합니다.
| EvPNG.fix('#foo'); |
막대의 div 클래스 배경으로 투명한 png를 사용하는 경우 다음과 같이 작성해야 합니다.
| EvPNG.fix('.bar"); |
구문은 CSS와 동일합니다. 계속해서 귀하와 웹사이트 구축 기술을 교환하고 싶습니다.
이 글은 원래 Tianniu.com(www.hers99.com)의 웹마스터인 Wang Zai가 작성한 것입니다.
기여해 주신 Wangzi 에게 감사드립니다.