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

  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. [LeetCode] Single Number III 单独的数字之三

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  2. [LeetCode] Path Sum 二叉树的路径和

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  3. .NET跨平台之旅:生产环境中第2个跑在Linux上的ASP.NET Core站点

    今天我们在生产环境中上线了第2个跑在Linux上的ASP.NET Core站点.这是一个简单的Web API站点,通过命令行的方式调用安装在Linux服务器上的程序完成操作.之前用的是nodejs,现 ...

  4. Nginx配置Https

    1.申请证书: https://console.qcloud.com/ssl?utm_source=yingyongbao&utm_medium=ssl&utm_campaign=qc ...

  5. 关于javascript的运动教程

    一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一 ...

  6. JAVA+Maven+TestNG搭建接口测试框架及实例

    1.配置JDK 见另一篇博客:http://www.cnblogs.com/testlurunxiu/p/5933912.html 2.安装Eclipse以及TestNG Eclipse下载地址:ht ...

  7. vim编辑强制退出

    quit!命令可以进行强制退出 在修改文件时注意他的权限, ls -l:查看当前目录下的所有文件的详细信息

  8. Linux下 JDK安装

    在linux下安装JDK步骤如下: 第一步:查看Linux自带的JDK是否已安装 (1)查看jdk: [root@web-server ~]# rpm -qa|grep jdk ← 查看jdk的信息或 ...

  9. 个人理解c#对称加密 非对称加密 散列算法的应用场景

    c#类库默认实现了一系列加密算法在System.Security.Cryptography; 命名空间下 对称加密 通过同一密匙进行加密和解密.往往应用在内部数据传输情况下.比如公司a程序 和B程序 ...

  10. 架构师养成记--8.Queue

    一.ConcurrentLinkedQueue 是一个适合在高并发场景下,无锁,无界的,先进先出原则.不允许为null值,add().offer()加入元素,这两个方法没区别:pull().peek( ...