png格式因为其优秀的压缩算法和对透明度的完美支持,成为web中最流行的图片格式之一。
IE6下png的图片不显示透明效果。其他浏览器都挺好的。
为了解决IE6下png图片的般透明效果,的方案是:
一次性解决PNG透明度在IE6下显示问题的脚本
function correctPNG() { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } } } function alphaBackgrounds(){ var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, ''); var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5); for (i=0; i<document.all.length; i++){ var bg = document.all[i].currentStyle.backgroundImage; if (bg){ if (bg.match(/.png/i) != null){ var mypng = bg.substring(5,bg.length-2); //alert(mypng); document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://xiaomiya2008.blog.163.com/blog/"+mypng+"', sizingMethod='crop')"; document.all[i].style.backgroundImage = "url('')"; //alert(document.all[i].style.filter); } } } } if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) { window.attachEvent("onload", correctPNG); window.attachEvent("onload", alphaBackgrounds); }
它的实现原理是当页面加载完成后,先遍历页面内所有的图片元素,找到后缀为.png的图片,将他们改成span标签,设置为display:inline-block的类型,长宽和原png图片一样,然后配上progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘png 图片路径’,sizingMethod=‘crop’)的滤镜,实现png的透明效果,再遍历页面内所有元素,检查他们是否有png的背景图,如果有,则将背景图去掉,改用滤镜。这种方式调用非常方便,只要将这段代码放入网页中任意地方,当页面加载完成后,png图片都可以实现透明。但他也存在一定问题。
1)当页面全部加载完成前,png图片的透明部分仍然会显示为浅蓝;
2)遍历所有元素,执行效率不高;
3)当png是以背景形式插入网页的,它可能有background-position和background-repeat属性,而滤镜是不支持者两个属性的,如果设置了这两个属性,这两个属性的效果会丢失。
相关推荐
总的来说,DD_belatedPNG是JavaScript技术在解决浏览器兼容性问题上的一次创新尝试,它通过JavaScript模拟出原本缺失的功能,使得在旧版IE浏览器上也能呈现现代网页设计的效果。然而,随着浏览器的不断更新换代,...
而PNG-24格式则提供了更丰富的色彩,但其Alpha通道透明度在IE6下失效。因此,如果你的图片颜色较为简单,转换为PNG-8格式或许就能解决问题。 但是,对于那些需要PNG-24格式透明效果的场景,我们需要采取其他方法。...
jQuery特效通常是指使用jQuery创建的视觉效果,而这里提到的jQuery插件可能是专门为解决IE6与PNG透明度问题设计的。 根据压缩包子文件的文件名称列表,"调用方法.txt"可能包含了如何在网页中引入和使用这个jQuery...
幸运的是,《精通CSS》一书提供了针对IE5.x及更高版本的PNG透明度解决方案,通过特定的CSS规则或JavaScript脚本,可以在不同浏览器环境中实现一致的透明效果。 综上所述,精通CSS不仅仅是掌握语法那么简单,它更是...
2. `iepngfix.htc`:这通常是一个解决Internet Explorer浏览器对PNG透明图像支持不完全的问题的脚本。由于IE6等早期版本的IE浏览器对PNG透明处理不佳,这个文件提供了兼容性解决方案。 3. `index.html`:这是网站的...
- **问题**: 在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理? - **答案**: 请求JS/CSS文件时,可能会经历以下层次的缓存: - 浏览器内存缓存 - ...
- **1像素高度显示问题**:IE6默认行为,可通过`overflow: hidden`等方法解决。 - **Flash透明背景**:通过设置Flash参数`wmode="transparent"`实现。 #### 11. 居中元素的CSS技巧 - **居中元素**:通过设置`...
- **兼容性问题**:如IE下的盒模型问题、某些CSS属性支持度不一致等。 - **解决方法**:使用条件注释、特定浏览器前缀、Polyfill等。 - **常用hack技巧**:如`*zoom: 1`用于IE6-8的兼容性问题。 19. **li与li...
在 css/js 代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次 js 请求一般情况下有哪些地方会有缓存处理?** - 浏览器缓存(如 HTTP 缓存)、服务端缓存、CDN 缓存等都是常见的缓存机制。 **14. 一...
**13、在 css/js 代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次 js 请求一般情况下有哪些地方会有缓存处理?** - 浏览器缓存:本地缓存、服务端缓存。 - CDN 缓存:减少服务器压力。 - HTTP 协议...
4. **进度条显示**:在文件上传过程中,Uploadifive会显示上传进度,让用户了解文件上传的状态,增加了操作的透明度。 5. **自定义样式**:描述中提到,Uploadifive的样式可以根据个人喜好进行修改,开发者可以通过...
- **常见兼容性问题**:如 IE 下的盒模型问题、CSS3 新特性支持度差异、事件模型差异等。 - **解决方案**:使用条件注释、前缀、Polyfills 等方法解决。 #### 前端框架与模型 - **MVC 模型**:Model-View-...
参数 临时透明度, 字节型, 可空, 设置整个窗口的透明度 取值范围是[0,255] 可空为不设定此参数 .参数 临时透明色, 整数型, 可空, (#颜色)指定某颜色为完全透明(完全透明处不属于该窗口) 可空为不指定 .参数 鼠标穿透...