今天用到了两张PNG格式的图片,其中一张用作背景图片,一张放在内容中显示。对于两张图片的要求都是要透明显示。自己是造不出来方法的。因此就在网上搜索了一下,找到了好几种方法。把用到的这两种先记录下来,以备以后再用。
<div id="logo"></div>
<div class="hotlink"><img src="image/service.png" alt="hotlink" /></div>
#logo
{
width:80px;
float:left;
height:83px;
background:url(../image/Ejy8logo.png) no-repeat;
}
/*图片做背景时透明显示*/
*html #logo{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../image/Ejy8logo.png"); background:none;}
/*使用的时候把src换成使用图片的路径就可以了*/
.hotlink img
{
width:250px;
height:50px;
}
/*下面的方法直接使用就可以了,图片作为内容显示透明*/
* html .hotlink img,* html .png{
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "../image/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}
-
其中,背景图片透明显示的解决方案中用到的是
AlphaImageLoader滤镜
该滤镜的语法如下:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性:
enabled:可选项、布尔值(true|false),用来设置或检索滤镜是否激活
sizingMethod:可选项、字符串(string),用来设置或检索滤镜作用的对象在容器边界内的显示方式。
字符串可能的取值如下:
crop:剪切图片以适应对象尺寸
image:默认值,增大或减小对象尺寸以适应图片的尺寸
scale:缩放图片以适应对象尺寸
src:必选项,字符串(string)。使用绝对或相对url地址来指定图片路径,如果忽略这个参数,滤镜将不起作用
我对脚本不理解,所以碰到使用脚本的地方总是绕着走,以后要好好学学JavaScript扫扫盲!
分享到:
相关推荐
PNG格式允许24位色彩的同时还提供了 Alpha 通道,可以实现半透明效果,但在IE6中,这种透明特性却无法正常显示,导致图片背景呈现出不透明的黑色或白色。以下是对这个问题的详细分析和解决方案: 首先,我们需要...
PNG(Portable Network Graphics)是一种支持透明度的图像格式,但在IE6中,它无法正确显示带有alpha透明通道的PNG-24图像,导致图片出现半透明部分变成全黑或者背景颜色无法透过,这被称为“PNG透明问题”。...
然而,在Internet Explorer 6 (IE6) 这个古老的浏览器上,PNG图片的Alpha透明通道并不能得到很好的支持,导致图片显示为不透明或有颜色异常。这在网页设计中是一个常见的问题,因为设计师往往需要使用透明效果来实现...
总之,"VB 透明PNG图片显示控件"是一个解决VB6与PNG图像透明显示问题的解决方案。通过利用GDI+的功能,开发者可以创建出能够正确显示PNG透明效果的自定义控件,提升应用程序的视觉效果。在实际项目中,这样的控件...
为了解决这个问题,开发者们开发了一系列JavaScript库和技巧,使得在IE6下也能实现PNG图像的透明效果。 1. **Alpha Image Loader滤镜**:IE6提供了一个名为"Alpha Image Loader"的滤镜,可以通过CSS样式应用到元素...
本文将深入探讨这个问题,并提供JavaScript解决方案来实现IE6下PNG图片的透明显示。 首先,我们需要理解为什么IE6不支持PNG透明。PNG-24格式允许半透明和全透明效果,但IE6只支持8位的PNG-8,而这种格式最多只能有...
这篇教程将详细介绍如何在IE6下实现PNG图片的透明效果。 首先,我们需要理解IE6对PNG透明的支持问题。IE6只部分支持PNG-8格式,而不支持PNG-24格式的半透明或Alpha透明。PNG-8最多只能有256种颜色,并且不支持Alpha...
PNG是一种无损压缩的图像格式,支持透明度,但在IE6下,透明效果往往无法正常显示。为了解决这个问题,开发者们开发了各种JavaScript解决方案,以实现跨浏览器的PNG透明效果。 标题“IE6下PNG透明代码”所涉及的...
总之,要解决PNG图片在IE6和Firefox上的透明兼容问题,开发者需要了解PNG格式的透明特性,掌握iepngfix.htc的行为文件使用方法,以及如何在CSS中应用这些技巧,以实现跨浏览器的兼容性。这是一个典型的前端开发中的...
### PNG图片在IE6中的透明显示技术解析 在Web开发的历史长河中,Internet Explorer 6(简称IE6)曾是一道独特的风景线。由于其市场占有率极高且生命周期漫长,直至2010年代初,许多网站仍需考虑对IE6的兼容性支持。...
标题提到的“js 解决png图片在IE6下透明问题”是一个典型的老版IE浏览器兼容性问题。PNG格式的图片支持透明度,但在IE6中,PNG-24格式的图片会出现背景透明效果失效的问题,而PNG-8格式则只能支持256色,限制了色彩...
### PNG图片在IE6下完美透明的JS:深入解析与实现原理 #### 一、问题背景及重要性 在Web开发的历史长河中,Internet Explorer 6(简称IE6)曾占据主导地位,但其对现代Web技术的支持有限,尤其是对PNG格式图像的...
PNG图片在Internet Explorer 6(简称IE6)下的显示问题是一个历史遗留的挑战,由于IE6对PNG格式的不完全支持,导致透明效果和部分渲染出现异常。PNG是一种优秀的无损压缩图像格式,广泛用于网页设计,特别是需要半...
只需引入库并调用相应函数,即可使PNG图片在IE6下变得透明。 3. **CSS Hack**:开发者还可以利用CSS选择器的特定性来为IE6单独设置样式。例如,可以使用`*html`前缀或者`_height`这样的非标准属性,将透明滤镜应用...
在互联网早期,IE6(Internet Explorer 6)作为当时最常用的浏览器,存在许多兼容性问题,其中PNG(Portable Network Graphics)格式的透明图片在IE6下显示不正常就是其中之一。PNG格式,特别是PNG-24格式,支持半...
标题“png透明显示IE6”涉及的是一个古老但仍然具有一定现实意义的问题,即如何在Internet Explorer 6(简称IE6)浏览器中正确显示PNG格式图片的透明效果。PNG是一种流行的图像格式,支持丰富的颜色和透明度,但在IE...
然而,通过一些技术手段,我们可以“完美解决IE6下PNG背景、图片透明问题”。 首先,我们需要了解PNG图像格式。PNG是一种无损压缩的位图格式,支持透明度设置,包括完全透明和半透明。对于其他现代浏览器,如Fire...
在IE6中,PNG的Alpha透明(半透明效果)并不能完美地呈现,导致图像显示不正常。这个问题在后续的IE7和IE8中得到了部分改善,但仍然需要特别处理来确保在这些旧版浏览器中的兼容性。 首先,我们需要了解PNG图像的...
要解决“PNG图片在IE6下的背景透明”问题,有几种常见的方法: 1. **CSS滤镜方法**:IE6支持CSS滤镜,可以利用它来实现PNG的透明效果。例如,对于一个ID为"imgId"的PNG图片,可以添加以下CSS样式: ```css #imgId...
然而,对于使用Internet Explorer 6(简称IE6)的用户来说,PNG图片的透明特性并不完全兼容,导致在浏览器中显示时出现各种问题。这个问题主要源于IE6对PNG8和PNG24格式的支持不足,尤其是对于Alpha通道透明度的支持...