>  기사  >  웹 프론트엔드  >  CSS를 사용하여 IE6에서 png 투명 이미지가 정상적으로 표시되는 문제를 해결하는 방법

CSS를 사용하여 IE6에서 png 투명 이미지가 정상적으로 표시되는 문제를 해결하는 방법

高洛峰
高洛峰원래의
2017-03-27 17:25:531566검색

CSS를 오랫동안 작성하지 않았습니다. png 투명 로고로 인해 오랫동안 어려움을 겪었습니다. 이전 페이지에서 투명성 문제를 고려하지 않은 것도 제 잘못입니다. 인터넷에서 여러 가지 방법을 찾았는데 그 중 일부는 CSS로 구현되었고 일부는 js를 사용하는 것이 과도한 것 같습니다. 순수 CSS를 사용하여 문제를 해결할 수 있다면 그냥 CSS를 사용하세요. 당신의 도움. 다음 두 가지 방법을 시도해 보았으나 가상 머신 아래의 ie6 이미지가 완전히 투명해졌습니다. 이것이 가상 머신의 문제인지는 모르겠습니다.
먼저 이미지를 PNG-24 투명 형식으로 저장하세요.
(이미지에는 절대 경로가 있어야 합니다)
방법 1: png 이미지를 배경으로 사용
해킹 주의
html 코드


css 코드
.logo { 너비: 338px; 높이: 57px; float: url( /images/logo.png) 0px 0px 반복 없음!중요; 텍스트 들여쓰기: -1000px; _배경 이미지: 없음; 필터:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" /images/logo.png', senabled='true' , sizingMethod=' scale'); }

표준: _Background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" /templets/dyimgs/wymrs/images/logo. png', 활성화 ='bEnabled', sizingMethod='image');


방법 2: png 이미지 삽입 및 img 정의
이 방법을 사용하려면 완전히 투명한 이미지를 준비해야 합니다. transparent.gif, 크기는 임의적입니다.
html 코드


css 코드
.logo { 너비: 338px; 높이: 57px; float: 왼쪽; }
.logo img { 너비: 338px; ; }
/* ie6과 투명하게 호환되는 png */
.logo img {
방위각: 표현식(
this.pngSet ? this.pngSet = true:(this.nodeName == "IMG" && "http://blog.51cto.com/viewpic.php?refimg=" + this.src.toLowerCase().indexOf('.png')>-1 ? (this.runtimeStyle.BackgroundImage = "없음" ,
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" //qianduangcs.blog.51cto.com/2624849/" + "http://blog.51cto.com/ viewpic .php?refimg=" + this.src + "', sizingMethod='image')",
"http://blog.51cto.com/viewpic.php?refimg=" + this.src=' # '" /images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.BackgroundImage.toString().replace('url("','').replace(' " )',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" //qianduangcs.blog.51cto.com/2624849/" + this.origBg + " ', sizingMethod='crop')",
this.runtimeStyle.BackgroundImage = "none")), this.pngSet=true
);
}

때때로 하이퍼링크가 추가됩니다. 이 투명 필터를 사용한 후에는 페이지의 모든 하이퍼링크를 더 이상 클릭할 수 없습니다.

위치: 상대;

단, 여기서 이미지 경로는 상대 경로이므로 이 상대 경로는 CSS가 아닌 html을 기반으로 한다는 점에 유의할 필요가 있습니다.

위 내용은 CSS를 사용하여 IE6에서 png 투명 이미지가 정상적으로 표시되는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.