IE6에서 png 이미지의 불투명한 배경에 대한 솔루션은 js_javascript 기술을 사용하여 구현됩니다.

png 이미지를 사용할 때 IE6에서 배경 불투명도 문제가 발생합니다. 다음 js 솔루션을 소개하겠습니다.
먼저 js를 사용해야 합니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

/**
* DD_belatedPNG: IE6 지원을 추가합니다: CSS 배경 이미지 및 HTML 에 대한 PNG 이미지.
* 작성자: Drew Diller
* 이메일: draw.diller@gmail.com
* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
* 버전: 0.0.8a
* MIT 라이센스에 따라 라이센스가 부여됨: http://dillerdesign.com/experiment/DD_belatedPNG/#license
*
* 사용 예:
* DD_belatedPNG.fix('.png_bg'); // 인수는 CSS 선택기입니다.
* DD_belatedPNG.fixPng( someNode ); // 인수는 HTMLDomElement입니다.
**/
/*
필독:
물론 이 스크립트의 모든 내용은 바보입니다. 나는 이것을 알고 있다. IE의 특정 픽셀 렌더링은 의미가 없으므로 이 코드도 마찬가지입니다!
*/
/**rewrite by waitbar 2012.1.12
IE6에서 축소 시 투명한 png 이미지가 완전히 표시되지 않는 문제를 해결하기 위해
el.vml.image.fill.type = 'tile'로 변경됨:
el.vml.image.fill.type = '프레임'
*/

var DD_belatedPNG = {
ns: 'DD_belatedPNG',
imgSize: {},
지연: 10,
nodesFixed: 0,
createVmlNameSpace: function () { /* VML 활성화 */
if (document.namespaces && !document.namespaces[this.ns]) {
document.namespaces.add (this.ns, 'urn:schemas-microsoft-com:vml');
}
},
createVmlStyleSheet: function () { /* 스타일 VML, 동작 활성화 */
/*
많은 개발자가
다른 많은 기능을 추가한 경우를 대비해 document.createStyleSheet
를 사용하여 스타일시트를 만들고 31개 제한 표시에 도달하면 해당 방법을 사용하지 마세요!
추가 자료: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx
*/
var screenStyleSheet, printStyleSheet;
screenStyleSheet = document.createElement('style');
screenStyleSheet.setAttribute('media', 'screen');
document.documentElement.firstChild.insertBefore(screenStyleSheet, document.documentElement.firstChild.firstChild);
if (screenStyleSheet.styleSheet) {
screenStyleSheet = screenStyleSheet.styleSheet;
screenStyleSheet.addRule(this.ns '\:*', '{behavior:url(#default#VML)}');
screenStyleSheet.addRule(this.ns '\:shape', 'position:absolute;');
screenStyleSheet.addRule('img.' this.ns '_sizeFinder', 'behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visible:hidden;'); /* James O'Brien이 제안한 큰 이미지의 수직 스크롤 막대를 피하기 위한 큰 음수 상단 값, http://www.thanatopsic.org/hendrik/ */
this.screenStyleSheet = screenStyleSheet;
/* VML 아티팩트가 인쇄(미리보기 포함)에 표시되는 것을 방지하기 위해 인쇄 매체 스타일시트를 추가합니다. */
/* 이를 자동화해 준 R閙i Pr関ost에게 감사드립니다! */
printStyleSheet = document.createElement('style');
printStyleSheet.setAttribute('media', 'print');
document.documentElement.firstChild.insertBefore(printStyleSheet, document.documentElement.firstChild.firstChild);
printStyleSheet = printStyleSheet.styleSheet;
printStyleSheet.addRule(this.ns '\:*', '{display: none !important;}');
printStyleSheet.addRule('img.' this.ns '_sizeFinder', '{display: none !important;}');
}
},
readPropertyChange: function () {
var el, display, v;
el = event.srcElement;
if (!el.vmlInitiated) {
return;
}
if (event.propertyName.search('배경') != -1 || event.propertyName.search('border') != -1) {
DD_belatedPNG.applyVML(el) ;
}
if (event.propertyName == 'style.display') {
display = (el.currentStyle.display == 'none') ? '없음' : '차단';
for (v in el.vml) {
if (el.vml.hasOwnProperty(v)) {
el.vml[v].shape.style.display = 디스플레이;
}
}
}
if (event.propertyName.search('filter') != -1) {
DD_belatedPNG.vmlOpacity(el);
}
},
vmlOpacity: function (el) {
if (el.currentStyle.filter.search('lpha') != -1) {
var trans = el. 현재스타일.필터;
trans = parsInt(trans.substring(trans.lastIndexOf('=') 1, trans.lastIndexOf(')')), 10)/100;
el.vml.color.shape.style.filter = el.currentStyle.filter; /* 완전한 추측 */
el.vml.image.fill.opacity = trans; /* 추측 완료 */
}
},
handlePseudoHover: function (el) {
setTimeout(function () { /* setTimeout이 없으면 의도한 대로 작동하지 않습니다 */
DD_belatedPNG .applyVML(el)
}, 1);
},
/**
* 문서에서 사용하는 방식입니다.
* @param {String} 선택기 - 필수 - '#doc .container'와 같은 CSS 선택기
**/
fix: function (selector) {
if (this.screenStyleSheet) {
var selectors, i;
선택기 = selector.split(','); /* 여러 선택기가 지원되므로 더 이상 여러 번 호출할 필요가 없습니다. */
for (i=0; ithis.screenStyleSheet.addRule(selectors[i], 'behavior :expression(DD_belatedPNG.fixPng(this))'); /* 스타일시트에 추가하지 않고 함수를 실행하는 것 같습니다. 흥미롭습니다... */
}
}
},
applyVML: 함수(el) {
el.runtimeStyle.cssText = '';
this.vmlFill(el);
this.vmlOffsets(el);
this.vmlOpacity(el);
if (el.isImg) {
this.copyImageBorders(el);
}
},
attachHandlers: function (el) {
var self, handlers, handler, moreForAs, a, h;
본인=이것;
핸들러 = {resize: 'vmlOffsets', move: 'vmlOffsets'};
if (el.nodeName == 'A') {
moreForAs = {mouseleave: 'handlePseudoHover', mouseenter: 'handlePseudoHover', focus: 'handlePseudoHover', Blur: 'handlePseudoHover'};
for (a in moreForAs) {
if (moreForAs.hasOwnProperty(a)) {
handlers[a] = moreForAs[a];
}
}
}
for (h in handlers) {
if (handlers.hasOwnProperty(h)) {
handler = function () {
self[handlers [h]](엘);
};
el.attachEvent('on' h, 핸들러);
}
}
el.attachEvent('onpropertychange', this.readPropertyChange);
},
giveLayout: 함수(el) {
el.style.zoom = 1;
if (el.currentStyle.position == 'static') {
el.style.position = 'relative';
}
},
copyImageBorders: function (el) {
var styles, s;
styles = {'borderStyle':true, 'borderWidth':true, 'borderColor':true};
for (s in styles) {
if (styles.hasOwnProperty(s)) {
el.vml.color.shape.style[s] = el.currentStyle[s];
}
}
},
vmlFill: function (el) {
if (!el.currentStyle) {
return;
} else {
var elStyle, noImg, lib, v, img, imgLoaded;
elStyle = el.currentStyle;
}
for (v in el.vml) {
if (el.vml.hasOwnProperty(v)) {
el.vml[v].shape.style.zIndex = elStyle.zIndex ;
}
}
el.runtimeStyle.BackgroundColor = '';
el.runtimeStyle.BackgroundImage = '';
noImg = true;
if (elStyle.BackgroundImage != 'none' || el.isImg) {
if (!el.isImg) {
el.vmlBg = elStyle.BackgroundImage;
el.vmlBg = el.vmlBg.substr(5, el.vmlBg.lastIndexOf('")')-5);
}
else {
el.vmlBg = el.src;
}
lib = this;
if (!lib.imgSize[el.vmlBg]) { /* 로드된 이미지의 크기 결정 */
img = document.createElement('img');
lib.imgSize[el.vmlBg] = img;
img.className = lib.ns '_sizeFinder';
img.runtimeStyle.cssText = 'behavior:none; 왼쪽:-10000px ; top:-10000px; border:none; padding:0;'; /* 도우미 요소가 실수로 일치하는 것을 방지하려면 동작을 없음으로 설정하세요. */
imgLoaded = function () 🎜>this.width = this.offsetWidth; /* 이상한 캐시 무효화 요구사항 */
this.height = this.offsetHeight;
lib.vmlOffsets(el)
img .attachEvent('onload', imgLoaded);
img.src = el.vmlBg;
img.removeAttribute('width')
img.removeAttribute('height'); body.insertBefore(img, document.body.firstChild);
}
el.vml.image.fill.src = el.vmlBg;
noImg = false; vml.image.fill.on = !noImg;
el.vml.image.fill.color = '없음';
el.vml.color.shape.style.BackgroundColor = elStyle.BackgroundColor;
el.runtimeStyle.BackgroundImage = '없음';
el.runtimeStyle.BackgroundColor = '투명';
},
/* IE는 offsetLeft와 clientLeft의 합이 1이 되고 VML이 흐릿해지면 어떻게 해야 하는지 알 수 없습니다. 따라서 1픽셀씩 푸시/확대해야 합니다. 그런 다음 초과분을 잘라냅니다. */
vmlOffsets: function (el) {
var thisStyle, size, fudge, makeVisible, bg, bgR, dC, altC, b, c, v;
thisStyle = el.currentStyle;
크기 = {'W':el.clientWidth 1, 'H':el.clientHeight 1, 'w':this.imgSize[el.vmlBg].width, 'h':this.imgSize[el.vmlBg ].height, 'L':el.offsetLeft, 'T':el.offsetTop, 'bLW':el.clientLeft, 'bTW':el.clientTop};
퍼지 = (size.L size.bLW == 1) ? 1:0;
/* vml 모양, 왼쪽, 위쪽, 너비, 높이, 원점 */
makeVisible = function(vml, l, t, w, h, o) {
vml.coordsize = w ',' 시간;
vml.coordorigin = o ',' o;
vml.path = 'm0,0l' w ',0l' w ',' h 'l0,' h ' xe';
vml.style.width = w 'px';
vml.style.height = h 'px';
vml.style.left = l 'px';
vml.style.top = t 'px';
};
makeVisible(el.vml.color.shape, (size.L (el.isImg ? 0 : size.bLW)), (size.T (el.isImg ? 0 : size.bTW)), (size. W-1), (크기.H-1), 0);
makeVisible(el.vml.image.shape, (size.L size.bLW), (size.T size.bTW), (size.W), (size.H), 1 );
bg = {'X':0, 'Y':0};
if (el.isImg) {
bg.X =parseInt(thisStyle.paddingLeft, 10) 1;
bg.Y =parseInt(thisStyle.paddingTop, 10) 1;
}
else {
for (b in bg) {
if (bg.hasOwnProperty(b)) {
this.FigurePercentage(bg, size, b, thisStyle['BackgroundPosition') 비]);
}
}
}
el.vml.image.fill.position = (bg.X/size.W) ',' (bg.Y/size.H);
bgR = thisStyle.BackgroundRepeat;
dC = {'T':1, 'R':size.W 퍼지, 'B':size.H, 'L':1 퍼지}; /* 모든 종류의 반복에 대한 기본값입니다 */
altC = { 'X': {'b1': 'L', 'b2': 'R', 'd': 'W'}, 'Y ': {'b1': 'T', 'b2': 'B', 'd': 'H'} };
if (bgR != 'repeat' || el.isImg) {
c = {'T':(bg.Y), 'R':(bg.X size.w), 'B' :(bg.Y 크기.h), 'L':(bg.X)}; /* 이는 반복 없음에 대한 기본값입니다. 이미지 위치까지 클립합니다. */
if (bgR.search('repeat-') != -1) { /* 이제 반복-x에 대해 dC로 되돌리거나 반복-y */
v = bgR.split('repeat-')[1].toUpperCase();
c[altC[v].b1] = 1;
c[altC[v].b2] = 크기[altC[v].d];
}
if (c.B > size.H) {
c.B = size.H;
}
el.vml.image.shape.style.clip = 'ret(' c.T 'px '(c.R 퍼지) 'px ' c.B 'px '(c.L 퍼지) 'px)';
}
else {
el.vml.image.shape.style.clip = 'ret(' dC.T 'px ' dC.R 'px ' dC.B 'px ' dC.L ' px)';
}
},
FigurePercentage: 함수(bg, 크기, 축, 위치) {
var 수평, 분수;
분수 = 참;
수평 = (축 == 'X');
switch(position) {
case 'left':
case 'top':
bg[axis] = 0;
휴식;
케이스 '중심':
bg[축] = 0.5;
휴식;
케이스 '오른쪽':
케이스 '하단':
bg[축] = 1;
휴식;
기본값:
if (position.search('%') != -1) {
bg[axis] =parseInt(position, 10) / 100;
}
else {
분수 = false;
}
}
bg[축] = Math.ceil( Fraction ? ( (size[horizontal?'W': 'H'] * bg[축]) - (size[horizontal?'w ': 'h'] * bg[축]) ) : parsInt(position, 10) );
if (bg[축] % 2 === 0) {
bg[축] ;
}
return bg[축];
},
fixPng: 함수(el) {
el.style.behavior = 'none';
var lib, els, nodeStr, v, e;
if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR') { /* 아직 지원되지 않는 요소 */
return;
}
el.isImg = false;
if (el.nodeName == 'IMG') {
if(el.src.toLowerCase().search(/.png$/) != -1) {
el.isImg = true ;
el.style.visibility = '숨김';
}
else {
반환;
}
}
else if (el.currentStyle.BackgroundImage.toLowerCase().search('.png') == -1) {
return;
}
lib = DD_belatedPNG;
el.vml = {색상: {}, 이미지: {}};
els = {모양: {}, 채우기: {}};
for (v in el.vml) {
if (el.vml.hasOwnProperty(v)) {
for (e in els) {
if (els.hasOwnProperty(e)) {
nodeStr = lib.ns ':' e;
el.vml[v][e] = document.createElement(nodeStr);
}
}
el.vml[v].shape.Stroked = false;
el.vml[v].shape.appendChild(el.vml[v].fill);
el.parentNode.insertBefore(el.vml[v].shape, el);
}
}
el.vml.image.shape.fillcolor = '없음'; /* 이미지 로드를 기다리는 동안 빈 흰색 모양 각도를 표시하지 마세요. */
//el.vml.image.fill.type = '타일'; /* 이미지를 표시합니다. */
el.vml.image.fill.type = '프레임'; /* 2012.1.12 */
el.vml.color.fill.on = false; /* 실제로는 vml 요소의 style.BackgroundColor를 적용할 예정이므로 흰색을 숨깁니다. */
lib.attachHandlers(el);
lib.giveLayout(el);
lib.giveLayout(el.offsetParent);
el.vmlInitiated = true;
lib.applyVML(el); /* 렌더링! */
}
};
try {
document.execCommand("BackgroundImageCache", false, true); /* TredoSoft Multiple IE는 이것을 좋아하지 않으므로{} 시도해 보세요 */
} catch(r) {}
DD_belatedPNG.createVmlNameSpace();
DD_belatedPNG.createVmlStyleSheet();

下面我们来看怎么使用这个js：
DD_belatedPNG是一款完美解决IE6下的PNG透明JS插件，DD_belatedPNG用了微软的VML语言对PNG 더 많은 ie6을 다운로드하세요.解决方案，其它的案유很多负 창작용。

使用方法：

复代码 代码如下:

< !--[IE 6의 경우]><script> DD_belatedPNG.fix('.png_bg');</script>

引用函数是DD_belatedPNG.fix(), 括号里的 *表示所有css选择器.png_bg 改成你的css选择器name称。