`
sbfivwsll
  • 浏览: 64075 次
  • 性别: Icon_minigender_1
  • 来自: 四川
社区版块
存档分类
最新评论

关于滤镜AlphaImageLoader src属性的相对路径问题

 
阅读更多

今天偶然发现一个很让人无奈的问题。因为我们的项目需要欠入到别第三方业务的页面。两个页面结构层次不一致。结果发现:在我们的页面在样式文件里边设置了filter滤镜来过滤png图片(png图片在ie6中有灰色的背景,需要使用过滤器来过滤),结果这些滤镜全都不能显示。后来查找问题,发现写在样式文件里边的filtersrc是相对于当前浏览器的url路径,而不是相对于样式文件的路径(这与background-image的路径不同,background-image的路径是相对于样式文件的路径)

例如:样式文件

http://a.b.c/a/b/c/d.css 里边有如下样式定义:

.test{

background-image:url(‘../../images/a.gif’);

}

.testFilter{

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=true , sizingMethod=scale, src=’../../images/b.png’ )

}

在页面http://b.c/a/b/c.html里边引用该样式文件,那么:

使用test样式时,它的背景图片取值路径为:

http://a.b.c/a/images/a.gif,

而使用testFilter时,引用的滤镜的图片地址为:

http://b.c/images/b.png

分享到:
评论

相关推荐

    IE6兼容png24透明滤镜写法 图片路径是以页面为基点

    总之,解决IE6对PNG-24图像透明性的支持,需要利用特定的CSS滤镜技术,理解路径的相对性,并注意滤镜的局限性。虽然现在IE6的使用率已经非常低,但了解这一历史遗留问题仍然有助于理解浏览器兼容性和前端开发的历史...

    ie8下上传图片无法预览本地图片解决方法技术资料

    - 更新滤镜的`src`属性,将其设置为想要预览的本地图片路径。 3. **完整示例代码**: - 下面是完整的HTML和JavaScript代码示例,展示了如何在IE8中实现本地图片的预览功能。 ```html #divFilter { filter:...

    实现IE6下png图片透明JS代码

    这里使用了`AlphaImageLoader`滤镜,`src`参数指定了PNG图片路径,`sizingMethod`可以设置为'scale'(拉伸图片)或'crop'(保持原图比例)。`_filter`前缀是IE6私有的,确保只在IE6下应用此规则。 3. **JavaScript...

    浏览器兼容问题

    应用`AlphaImageLoader`滤镜加载图片资源; 3. 考虑使用GIF格式代替PNG格式。 5. **浮动元素问题**: - **问题描述**:IE 6-7在处理浮动元素时会出现布局错乱的情况。 - **解决方案**: 1. 使用`clear`属性...

    IE6透明解决方案,背景图片透明

    这里,`src`属性指定图片路径,`sizingMethod`可以是`crop`或`scale`,用于控制图片如何适应容器。 3. **背景图片透明**:对于背景图片,情况稍微复杂些。IE6不支持CSS的`background-color: transparent;`,因此...

    js倒圆角以及IE6png阴影的hack

    在这个例子中,`src`属性指向阴影PNG图片的路径,`sizingMethod`可以设置为'crop'或'scale',根据需求调整图片大小。 另外,还可以利用CSS精灵(CSS Sprites)技术来解决阴影问题。通过将阴影和主图合并成一个PNG...

    ie6中png透明解决方案 js

    el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + el.src + '", sizingMethod="scale")'; // 应用AlphaImageLoader滤镜 el.src = 'transparent.png'; // 将img的src替换为一个...

    IE6支持PNG透明图片方法

    这里,`src`属性指定了需要透明处理的PNG图片路径,`sizingMethod`参数决定了如何调整图片大小,'scale'表示按比例缩放。 2. 使用JavaScript库:像/DD_belatedPNG/这样的JavaScript库专门用于解决IE6的PNG透明问题...

    滤镜使用之图片透明的css写法

    这个属性用于设置图片的透明度,它的`src`参数指定了图片的路径,而`background:none`则是为了确保该滤镜效果能够正确应用在需要透明的图片上,而不是整个元素。 `AlphaImageLoader`滤镜的功能特性主要包括能够对...

    ie6下png透明图片显示不正常之最好的3种解决方案

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='你的图片路径.png', sizingMethod='scale'); *zoom: 1; /* 解决IE7及更高版本的浮动问题 */ } ``` 这段代码将使IE6使用滤镜加载指定路径的...

    解决XP IE8不支持css3的background-size问题实例

    `src`属性指定图片路径,`sizingMethod='scale'`表示按比例缩放图片以填充元素。 值得注意的是,这种方法仅能实现背景图片的缩放,不能像`background-size`那样完全覆盖或包含容器。而且,滤镜会影响页面性能,因此...

    解决IE6下PNG图片背景色不透明问题的方法

    `src`属性应替换为你实际的PNG图片路径。 2. **使用PNG8格式**:如果可能,可以将PNG24图片转换为PNG8格式。PNG8仅支持256种颜色,但能实现简单的透明效果,且在IE6下工作良好。 3. **条件注释法**:利用IE6特有的...

    IE6下PNG背景透明的方法.rar

    `src`属性指定图片路径,`sizingMethod`参数控制图片如何适应元素大小,如'crop'裁剪或'scale'缩放。 2. **CSS表达式**: 另一个方法是使用CSS表达式来动态加载AlphaImageLoader滤镜,但这种方法在性能上存在问题...

    web透明技巧-IE中的png图片透明

    总结一下,要在IE中实现PNG图片透明和元素透明,我们可以利用CSS滤镜中的`AlphaImageLoader`和`alpha`属性。不过,随着现代浏览器的普及,这些技术逐渐被淘汰,开发者应考虑使用更现代、更标准的方法,比如CSS3的`...

    ie6下png透明解决

    在这里,`src`属性指定了PNG图像的路径,`sizingMethod`决定了如何调整图片大小以适应元素。`scale`表示按比例缩放图片,以适应元素尺寸。需要注意的是,这种方法仅适用于背景图,如果需要作为内联元素使用,可能...

    解决IE6 PNG图片透明问题

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='你的图片路径.png', sizingMethod='scale'); *zoom: 1; } ``` 这段代码会用一个AlphaImageLoader滤镜加载图片,使得PNG24的透明效果得以呈现...

    ie6下png图片透明方法

    这里的`src`属性是原始PNG图片的路径,`sizingMethod`可以是'crop'或'scale',分别表示裁剪和缩放以适应图像容器。 另一种常见的解决方案是使用JavaScript库,如/DD_belatedPNG/。这个库由 Dean Edwards 创建,它...

    IE7不能立即显示上传的图片

    这里的关键在于使用了`filters.item`方法来获取`AlphaImageLoader`滤镜,并设置其`src`属性为用户选择的图片路径。此外,还需要设置`div`元素的宽高,以便正确显示图片。 ##### CSS样式 为了使上述代码能够正常...

Global site tag (gtag.js) - Google Analytics