기본적으로 지원하지 않는 브라우저에서 PNG 투명도를 작동시키는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/10243

  •  08-06-2019
  •  | 
  •  

문제

우리의 (사랑하는) 디자이너는 애플리케이션에 사용할 투명한 배경의 PNG 파일을 계속 생성합니다.나는 PNG의 이 기능이 "이전" 브라우저에서도 작동하는지 확인하고 싶습니다.가장 좋은 해결책은 무엇입니까?

아래 수정사항

@mabwi & @syd - PNG 사용에 동의하는지 여부는 중요하지 않습니다.이건 내가 해결해야 할 문제야!

@Tim Sullivan - IE7.js는 꽤 멋져 보이지만 애플리케이션의 다른 모든 변경 사항을 소개하고 싶지는 않습니다.PNG 문제만 해결하는 솔루션을 원합니다.링크를 보내주셔서 감사합니다.

도움이 되었습니까?

해결책

다음은 이전 브라우저에서 PNG 투명도를 처리하는 방법을 설명하고 보여주는 훌륭한 기사입니다. http://www.alistapart.com/stories/pngopacity/

다른 팁

나는 여기에서 매우 좋은 해결책을 찾았습니다. 유닛 인터랙티브 -> 랩 -> 유닛 PNG 수정

업데이트 단위 PNG는 다음에도 등장합니다. NETTUTS의 PNG 수정 옵션 목록

웹사이트의 주요 내용은 다음과 같습니다.

  • 매우 컴팩트한 자바스크립트:1kb 미만!
  • IE의 필터 속성으로 인한 몇 가지 상호 작용 문제를 해결합니다.
  • img 개체 및 배경 이미지 속성에서 작동합니다.
  • 자동으로 실행됩니다.클래스를 정의하거나 함수를 호출 할 필요가 없습니다.
  • 자동 너비 및 자동 높이 요소를 허용합니다.
  • 배포가 매우 간단합니다.

또한 팔레트화된 8비트 PNG 완전 알파 투명도 Photoshop과 GIMP가 믿게 되는 것과는 달리 존재하며 IE6에서는 성능이 더 저하됩니다. 즉, 투명도가 1비트로 줄어듭니다.사용 pngQuant 24비트 PNG에서 이러한 파일을 생성합니다.

IE7.js IE6에서는 PNG(투명도 포함)에 대한 지원을 제공합니다.

.pngs를 사용하여 사이트를 만들려고 노력했지만 그럴 가치가 없습니다.사이트가 느려지고 100% 작동하지 않는 해킹을 사용합니다.여기 일부 옵션에 대한 좋은 기사, 하지만 제 조언은 IE6을 지원할 필요가 없을 때까지 gif가 작동하도록 만드는 방법을 찾는 것입니다.아니면 IE6에 저하된 경험을 제공하십시오.

IE6에서 PNG를 사용하는 것은 다른 브라우저보다 어렵지 않습니다.Javascript 없이도 CSS에서 모든 기능을 지원할 수 있습니다.이전에 이 해킹 프로그램을 본 적이 있습니다.

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;
}

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}

이것이 유효한 CSS인지는 확실하지 않지만 사이트에 따라 그다지 중요하지 않을 수 있습니다.

(첫 번째 이미지의 URL은 스타일시트의 디렉토리를 기반으로 하고, 두 번째 이미지의 URL은 보고 있는 페이지의 디렉토리를 기반으로 한다는 점에 주목할 가치가 있습니다. 따라서 두 이미지가 일치하지 않는 이유는 무엇입니까?)

@H보스

표시할 모든 파일(및 각 파일의 크기)을 정확히 알고 있다면 모두 괜찮고 멋집니다. 해당 CSS 파일을 유지 관리하는 것은 엄청난 고통이겠지만 가능할 것이라고 생각합니다.매우 일반적인 목적으로 투명 PNG를 사용하려는 경우:a) 어떤 배경에서도 작동하는 아이콘(크기가 다를 수 있음)과 같은 부수적 그래픽, b) 반복되는 배경그럼 넌 망한 거야.내가 시도한 모든 해결 방법은 어느 시점에서 걸림돌에 부딪혔습니다(배경이 투명할 때 텍스트를 선택할 수 없습니다. 때때로 이미지가 이상한 크기로 표시되는 등), 최대 신뢰성을 위해서는 gif로 되돌려야 한다는 것을 알았습니다.

내 조언은 PNG 투명도 해킹을 시도해 보되 동시에 그것이 확실히 완벽하지는 않다는 것을 깨닫는 것입니다. 그리고 단지 기억하십시오. 7년이 넘은 브라우저.요즘 제가 하는 일은 IE6 사용자가 사이트를 처음 방문할 때 브라우저가 오래되었고 최신 웹사이트에서 요구하는 기능을 제공하지 않는다는 알림과 함께 팝업을 제공하는 것입니다. 당신에게 최고의 것을 제공하고, BLOODY WELL 업그레이드를 하면 우리 사이트와 인터넷 전체에서 더 나은 경험을 얻게 될 것입니다.

나는 모든 브라우저가 PNG-8을 지원한다고 생각합니다.알파 블렌딩은 아니지만 배경이 투명합니다.

내가 틀렸을 수도 있지만 IE6 이하에서는 PNG 파일에 투명성을 적용하지 않는다고 확신합니다.

당신은 일종의 존재이고, 당신은 일종의 그렇지 않습니다.

IE6은 기본적으로 이를 지원하지 않습니다.

그러나 IE는 미친 사용자 정의 javascript/css 및 COM 개체를 지원합니다(원래 XmlHttpRequest를 구현한 방식).

이러한 모든 해킹은 기본적으로 다음을 수행합니다.

  • 모든 PNG 이미지 찾기
  • directx 이미지 필터를 사용하여 이를 로드하고 IE가 이해하는 일종의 형식으로 투명한 이미지를 생성합니다.
  • 이미지를 필터링된 사본으로 교체합니다.

고려해야 할 한 가지는 이메일 클라이언트입니다.종종 PNG-24 투명도를 원하지만 IE6을 사용하는 컴퓨터의 Outlook 2003에서는 그렇습니다.이메일 클라이언트는 CSS 또는 JS 트릭을 허용하지 않습니다.

이를 처리하는 좋은 방법이 있습니다.http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

Fireworks에서 이미지를 PNG-8로 내보내면 gif 이미지와 동일하게 작동합니다.따라서 그들은 지저분하고 회색으로 보이지 않을 것이며 투명도는 투명하지만 다른 브라우저가 제공하는 완전한 24비트 사랑스러움을 갖지는 못할 것입니다.

문제를 완전히 해결하지는 못할 수도 있지만 적어도 문제를 다시 내보내는 것만으로도 부분적으로 문제를 해결할 수 있습니다.

내가 틀렸을 수도 있지만 IE6 이하에서는 PNG 파일에 투명성을 적용하지 않는다고 확신합니다.

제가 사용하는 두 가지 "솔루션"이 있습니다.투명도가 포함된 GIF 파일을 만들어 어디에서나 사용하거나 조건부 스타일 시트가 있는 IE 6 이하 버전에서만 사용하세요.두 번째는 배경 등으로 사용하는 경우에만 실제로 작동합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top