很多时候需要将图片显示在网页上,一般都会这样做,如下:

  1. <img src="xxx.jpg"/>

是的,这样是可以做到,但是如果我要将本地的图片显示到页面上呢?你可能会说,我还有办法,如下:

  1. <img src="C:\Users\Administrator\Desktop\xxx.jpg"/>

是的这样是可以?在你的本地确实能够完美的显示出来。

但是可惜的是,如果将你的网页放到服务器上,发现,额,怎么什么都没有了?

原来这一切在ie下都是不支持的直接去显示本地图片。至于在chrome下,比较easy,这里就不多话了,主要说说IE。

既然不支持,那当我们需要做图片的缩略显示的时候,怎么弄呢?

好家伙,那就用ie提供的css渲染吧。

AlphaImageLoader:在元素的背景和内容之间插入一张图片,并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。

语法格式:filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled:可选项,布尔值(Boolean)。设置或检索滤镜是否激活。 true:默认值。滤镜激活。 false:滤镜被禁止。
sizingMethod:可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
1)crop:剪切图片以适应对象尺寸。
2)image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 
3)scale:缩放图片以适应对象的尺寸边界。
src:必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

给个demo:

  1. this.select();
  2. this.blur();
  3. path = document.selection.createRange().text;
  4. var node = imageLi.find("div:eq("+_step+")");
  5. node.css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"});
  6. node[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
  7. node[0].style.width = 150 +"px";
  8. node[0].style.height = 100 +"px";
  9. node.css({"display":"inline-block","margin":"5px;"});

2:filter:alpha

关于在ie下的透明度问题,如下:

语法格式:filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)

  1. filter:Alpha(Opacity="50",FinishOpacity="100",Style="3");

opacity:值0-100,0表示完全透明,100表示完全不透明, 这个玩过ps 的朋友应该都蝗

FinishOpacity: 表示结束处的透明度.

style: 1 ,2, 3 ;1 表示线行,2表示圆形,中心发散,3 表示星形中心发散。

在标准浏览器下:直接opacity:0.5 就可以了。

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )的更多相关文章

  1. FILTER:progid:DXImageTransform.Microsoft.Gradient使用

    FILTER:progid:DXImageTransform.Microsoft.Gradient使用 语法: filter:progid:DXImageTransform.Microsoft.Gra ...

  2. 关于ie6中使用css滤镜[_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/*.png',sizingMethod='scale')]后链接无法点击的问题

    RT,我做的一个效果是试用png图做背景,通过_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/*.png' ...

  3. 在ie中用滤镜 (filter:progid:DXImageTransform.Microsoft.gradient)会触发overflow:hidden?

    1.在ie中用滤镜 (filter:progid:DXImageTransform.Microsoft.gradient)会触发overflow:hidden 在项目中做一个背景层透明内容(菜单)不透 ...

  4. Microsoft.AlphaImageLoader滤镜讲解

    Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理.虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是 ...

  5. Microsoft.AlphaImageLoader滤镜解说

    Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理.尽管FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,可是就IE5-IE6而言还是 ...

  6. Microsoft.AlphaImageLoader滤镜讲--透明处理<转>

    Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理.虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是 ...

  7. Microsoft.AlphaImageLoader过滤评论

    Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理.尽管FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,可是就IE5-IE6而言还是 ...

  8. Unable to open 'free_base.cpp': Unable to read file 'c:\Program Files\Microsoft VS Code\minkernel\crts\ucrt\src\appcrt\heap\free_base.cpp'

    问题 vscode编写C++程序,使用microsoft C++ Unable to open 'cvt.cpp': Unable to read file 'c:\Program Files\Mic ...

  9. 在IE6下使用filter设置png背景

    今天帮别人解决问题学会了一个在IE6下使用filter设置png背景,具体css写法如下: .login_form_wrap { width: 778px; height: 360px; backgr ...

随机推荐

  1. [翻译] Android是怎样绘制视图的

    原文:How Android Draws Views 当一个Activity获取到焦点的时候,它的布局就开始被绘制. 绘制的过程由Android framework处理.但布局层级的根节点必须由Act ...

  2. Spring_跨项目读取properties文件

    应用背景:工程中有40~50个项目,分为4个模块,分别是核心模块.服务接口模块.服务实现模块.Web模块.其它模块(包括消息队列.quartz任务等).工程中很多配置项都是多个项目共有调用的,所以单独 ...

  3. [原创开源项目]EPUBBuilder一款在线的epub电子书编辑工具

    epub 感觉自己么么哒, epub书:国外最流行的电子书格式: epub电子书介绍: epub全称为Electronic Publication的缩写,意为:电子出版, epub于2007年9月成为 ...

  4. asp.net mvc4 简单的服务器监控开发之C#获取服务器CPU、RAM、TCP等系统信息(上)

    一.背景 前段时间服务器出了点问题,加上学业愈来愈紧张,写博文分享的时间越来越少.虽然不是第一次在博客园上写经验,但是近期分享的博文得到了不少的朋友支持和指正,在这里内心非常感激和开心.希望以后能认真 ...

  5. Android ListView上拉获取下一页

    关于ListView上拉刷新的需求很多,实现方式也多种多样. 一般是简单的通过一个page变量来控制当前请求的页数,然后上拉的时候就发送请求. 实现出来后,经过测试哥的折腾,发现有诸多细节没有处理好, ...

  6. html javascript css3 php3.2.3离线手册

    各位新年快乐! 愿大家"愿有前程可奔赴,也有岁月可回头"! 发现个离线手册很全的网站,分享大家,也mark自用. http://www.shouce.ren/ 手册网

  7. SQLMap Tamper Scripts Update 04/July/2016

    SQLMap Tamper Scripts Update apostrophemask.py Replaces apostrophe character with its UTF-8 full wid ...

  8. 【Beta】第七次任务发布

    PM #103 #85 日常管理&dev版宣传&新增报告管理后台. 后端 #103 报告管理后台后端实现,提供必要API接口及文档说明 验收:符合要求的接口及其说明文档 前端 #89 ...

  9. 移动端阻止body滚动

    一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹 阻止滚动: css: body{ height:100%; overf ...

  10. idea maven scala

    http://docs.scala-lang.org/tutorials/scala-with-maven.html https://github.com/davidB/scala-archetype ...