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

  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. c#枚举使用详解

    简介 1. 枚举(enum type)通常用来表示一组常量.由于枚举是强类型的,这在编程中给我们提供了极大的方便. 2. 枚举的定义: public enum Sex { 男 = 0, 女 = 1 } ...

  2. css的初始化样式

    一切为了敏捷开发: http://blog.sina.com.cn/s/blog_71ed1b870101a52w.html CSS初始化示例代码 /* css reset www.admin1000 ...

  3. 更新过程 renewal process

    一类随机过程.是描述元件或设备更新现象的一类随机过程.设对某元件的工作进行观测.假定元件的使用寿命是一随机变量,当元件发生故障时就进行修理或换上新的同类元件,而且元件的更新是即时的(修理或更换元件所需 ...

  4. ajax提交数据到java后台,并且返回json格式数据前台接收处理值

    1.前台html页面.有一段代码如下: 账  户:  <input type="text" name="userName" id="userN& ...

  5. 82.Android之MVP+Retrofit+RxJava实践小结

    转载:http://wuxiaolong.me/2016/06/12/mvpRetrofitRxjava/ 关于MVP.Retrofit.RxJava,之前已经分别做了分享,如果您还没有阅读过,可以猛 ...

  6. UVa 524 Prime Ring Problem(回溯法)

    传送门 Description A ring is composed of n (even number) circles as shown in diagram. Put natural numbe ...

  7. linux系统下使用xampp 丢失mysql root密码【xampp的初始密码为空】

    如果在ubuntu 下面 使用xampp这个集成开发环境,却忘记mysql密码. 注:刚安装好的xampp的Mysql初始密码是空... 找回密码的步骤如下: 1.停止mysql服务器 sudo /o ...

  8. Thymeleaf

    1.在html顶部添加 <html xmlns:th="http://www.thymeleaf.org"> 2.url表达式 @{...} <link rel= ...

  9. SCI英文论文写作- Latex 进阶

    SCI英文论文写作- Latex 进阶   1.设置行间距的方法: %\setlength{\baselineskip}{15pt} \renewcommand{\baselinestretch}{1 ...

  10. 在 .NET 中开发基于 Chrome 内核的浏览器-创建一个简单浏览器

    首先在 http://www.cftea.com/tools/downloads/Cef.zip 下载文件包. 一.将文件解压拖入到 Visual Studio 对应的 WinForm 项目中. 二. ...