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

  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. Codeforces Round #383(div 2)

    A.快速幂 B. 题意:求ai^aj=x的数对个数,x和a[]给定 分析:a^b=c,则a^c=b,所以求ai^x=aj的个数,枚举一遍即可 C. 题意:给你一个有向图,每个点的出边只有一条,求最小的 ...

  2. KD-tree(2维)

    用于动态插入以及求某点的最近点的距离(BZOJ2648,BZOJ2716) #include <cstdio> #include <cmath> #include <al ...

  3. Canvas电子签名和游戏化

    今天一天的时间都在做包团报价的无流程原型设计,一方面参考了其他系统,一方面整理先在系统中不合理的部分,规范了报价元素的分类.梳理了意向需求,其实原来粗略的放了一个模板进去是听不靠谱的.客户的要求-&g ...

  4. java版简易socket客户端

    android项目需要使用到心跳, 于是编写了一个简易的socket客户端程序 主要功能是给服务端发送心跳包,保持在线状态 没有使用框架,这样避免了需要引入包,直接使用的阻塞Socket通信. 主要逻 ...

  5. 现在有哪些浏览器的哪些版本支持 HTML5

    现在有哪些浏览器的哪些版本支持 HTML5 1.IE IE9支持部分 IE10+支持2.Firefox Firefox3.5,3.6支持大部分 Firefox4.0+支持3.Chrome Chrome ...

  6. Block 代码快

    1.原理 1.1block类型 a.全局bock块   贯彻整个程序 b.栈块  存在于栈内存中,作用域中使用 c.堆块  自行管理其内存 注*:http://blog.parse.com/learn ...

  7. Calendar类

    Calendar类 注意:根据日历规则,如果想要这个月减去5天,那么则为: add(Calendar.Day,-5) 成员方法: public int get(int field):返回给定日历段的值 ...

  8. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  9. 后台动态添加的button,如何触发button_click事件?

    后台动态添加的button,需要在Page_Load或者Page_Init重新动态生成才能执行button_click public Panel GetContrlType() { Panel pan ...

  10. PHP 文件限速下载代码

    php 文件限速下载代码 <?php include("DBDA.class.php"); $db = new DBDA(); $bs = $_SERVER["QU ...