IE滤镜及其使用技巧

Gradient Filter和AlphaImageLoader Filter

  这两个属性是legend IE(IE6,7,8)中的渐变滤镜和透明滤镜,我们先详细介绍下这两个属性的用法,详情

可查看MSDN

  透明滤镜的使用方式很简单,只需在样式中定义

    "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)"

即可。其中,关键部分就是sProperties。sProperties包括3部分,分别设置enabled使能,src图片url,sizingMethod

图片显示的大小。其中,sizingMethod设置为scale显示规定大小,设置为image则显示原大小。

  设置滤镜的元素必须拥有布局,即该属性的hasLayout为true。拥有布局的方式很多,比如设置宽(高)度,设置

绝对定位,设置zoom:1等。

  当然也可以针对一个元素设置多个滤镜。MSDN是这样描述多个滤镜如何作用的:

When multiple filters are applied to an object, each filter is processed in source order, with the

exception of procedural surfaces, which are computed first. To emphasize a filter‘s effect, place it last

in source order or on the object‘s parent. Always place transitions last in source order.

尽量把影响较为明显的滤镜放在最后一个。

  渐变滤镜的使用方法和透明滤镜类似:

    “filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)”

sProperties包括了几个特别的属性,如enabled,EndColor(末尾颜色,不透明),EndColorStr(透明),StartColor,

StartColorStr(透明),GradientType(0为纵向渐变,1为横向渐变)。

  其中,EndColorStr和StartColorStr的设置有一定的技巧,因为它代表有透明度的颜色,所以字符串的构成有两部分,

即: # + 透明度 + 颜色。颜色很好理解,6个16进制的数,透明度部分却需要计算:Math.floor(透明度 * 255).toString(16)。

比如RGBA(0,0,0,0.3)就需要设置为#4c000000。

设置滤镜属性

  可以通过元素属性filters来获取设置的所有滤镜,针对每个滤镜,可以设置它的属性,比如Enabled,src,StartColorStr等等。

通过下面的例子可以很好的理解。

<!-- 透明滤镜的使用  -->
<DIV ID="oDiv" STYLE="position:relative; height:250px; width:250px;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src=‘http://pic31.nipic.com/20130727/12906030_080053134000_2.png‘, sizingMethod=‘scale‘);" >
</DIV>
<BR><BUTTON onclick="fnToggle(this);">Make Normal</BUTTON>
<!-- 渐变滤镜的使用 -->
<DIV ID="sDiv" STYLE="height:120px; color:green; filter:
        progid:DXImageTransform.Microsoft.gradient(enabled=‘false‘,
            startColorstr=#550000FF, endColorstr=#55FFFF00)" >
    A simple gradient
</DIV>
<BUTTON onclick="fnToggle2(this)">Add Gradient</BUTTON><BR/>
    var bToggle = 1
    var oDiv = document.getElementById("oDiv"),
            sDIv = document.getElementById("sDiv");
    function fnToggle(oObj) {
        if (bToggle) {
            bToggle = 0;
            oDiv.filters(0).sizingMethod="image";
            oObj.innerText=‘Enlarge It‘;}
        else {
            bToggle = 1;
            oDiv.filters(0).sizingMethod="scale";
            oObj.innerText=‘Make Normal‘;}
    }

    function fnToggle2(oObj) {
        if (sDIv.filters(0).enabled){
            sDIv.filters(0).enabled=‘false‘;
            oObj.innerText=‘Add Gradient‘;}
        else {
            sDIv.filters(0).enabled=‘true‘;
            oObj.innerText=‘Make Normal‘;}
    }

IE下滤镜的使用

  1,  元素透明

    legend IE不支持RGBA,可以通过渐变滤镜进行替换。   

   .rgba{
            background:rgba(0, 0, 0, 0.3);
            filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#4c000000‘, EndColorStr=‘#4c000000‘);
        }

    这样,在现代浏览器采用RBGA透明,而在旧IE下使用渐进滤镜使其背景透明。

  2,  IE6下背景透明

     都知道IE6不支持背景透明图片,但可以通过AlphaImageLoader进行替换。 

.png_hack{
          background-image: url(../img/the_image.png) !important;
          background-image: none;
          filter: none !important;
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘img/the_image.png‘);
        }
时间: 2024-10-06 01:39:50

IE滤镜及其使用技巧的相关文章

iOS开发之滤镜的使用技巧(CoreImage)

一.滤镜的内容和效果是比较多并且复杂的 ,学习滤镜需要技巧 如下: 两个输出语句解决滤镜的属性选择问题: 1.查询效果分类中包含什么效果按住command 点击CIFilter 进入接口文件 找到第128行-148行全部都是 效果分类 2.选择其中某一个分类拷贝NSLog -> [CIFilter filterNamesInCategory:刚才拷贝的分类]; -> 打印出来的 是这个分类包含的所有效果 -> 拷贝选择其中的某一个效果 3.查询使用的效果中可以设置什么属性(KVC) at

iOS开发 滤镜的使用

iOS开发之滤镜的使用技巧(CoreImage) 一.滤镜的内容和效果是比较多并且复杂的 ,学习滤镜需要技巧 如下: 两个输出语句解决滤镜的属性选择问题: 1.查询效果分类中包含什么效果按住command 点击CIFilter 进入接口文件 找到第128行-148行全部都是 效果分类 2.选择其中某一个分类拷贝NSLog -> [CIFilter filterNamesInCategory:刚才拷贝的分类]; -> 打印出来的 是这个分类包含的所有效果 -> 拷贝选择其中的某一个效果 3

燃烧的星云

这个教程重点在滤镜的使用技巧 主要是教你用滤镜如何去制作一个陨落的流星或者是一团燃烧的星云 内容很详细 新手对滤镜的使用不是很了解的话,可以跟着练练手 最终效果图 操作步骤 1.新建一个大小为:500*500,背景为黑色的文件. 2.在背景的中间建立一个130像素的正圆形选区,用白色描边,描边的宽度为:20个像素,位置:居内.效果如下所示: 3.按Ctrl+D去掉选区,选择“扭曲“滤镜中的“海洋波纹“,参数为:波纹大小:6,波纹幅度:14,效果如下所示: 4.执行径向模糊滤镜,参数为:数量为10

CSS技巧收集——毛玻璃效果(深入理解滤镜filter)

原文链接:http://www.cnblogs.com/ghost-xyx/p/5677168.html 先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的文字区域变成毛玻璃效果,首先想到的是给其设置一个透明度,并添加模糊滤镜: .content { background-color: rgba(0,0,0,0.3); -webkit-filter

Photoshop技能167个经典的Photoshop技巧大全

Photoshop技能167个经典的Photoshop技巧大全 学PS基础:Photoshop 技能167个­ 经典的Photoshop技巧大全,如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级水平.绝对不是广告噢. ­ 1. 快速打开文件­ 双击Photoshop的背景空白处(默认为灰色显示区域)即可打开选择文件的浏览窗口.­ 2. 随意更换画布颜色­ 选择油漆桶工具并按住Shift点击画布边缘,即可设置画布底色为当前选择的前景色.如果要还原到默认的颜色,设置前景色为25%灰度 (R19

Unity3D使用小技巧

原地址:http://unity3d.9tech.cn/news/2014/0411/40178.html 1.Crtl+f摄像机自动适配场景. 2.可以用一个立方体作为底盘. 3.人物角色可以直接引入包,有第一人称和第三人称,已经封装好. 4.光源可以设置投影. 5.3DMax是Z轴向上,而一般游戏引擎是Y轴向上,所以导出的时候一定要注意选择YZ转化的格式(YZ转化选项一定要勾选). 另外,obj格式不支持动画,其实游戏中最常用的格式是"FBX"和"DAE"格式,

京东后台图片优化技巧

文档主要包括以下几方面内容: 基本概念 位图 实际应用 什么时候应该使用PNG 什么时候应该使用JPG 总结 Photoshop中各种参数的含义及设置技巧 1.基本概念 位图 位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色.深度.透明度等信息来存储和显示图像.一张位图就好比一幅大的拼图,只不过每个拼块都是一个纯色的像素点,当我们把这些不同颜色的像素点按照一定规律排列在一起的时候,就形成了我们所看到的图像.所以当我们放大一幅像素图时,能看到这些拼片一 样的像素点(如下图).在web页面中

iOS开发&gt;学无止境 - 6个iOS图片文本设计的小技巧

英文:TOPE 作者:星夜暮晨 网址:http://www.jianshu.com/p/88263196fdf0 设计师们似乎拥有着我们这些开发者所没有的“魔力”,他们知道如何让一个应用的界面看起来非常得舒适,以至于有时让我们有了迫不及待将其复现的冲动. 然而,几天过去了,我们仍然还停留在设计稿的第一个界面,写下大段大段的代码,可是界面却不是我们想要的那个样子,这无疑是非常让人恼火的一件事情. 好消息是设计师们的“魔力”并不是我们想象中的那么神奇,有一些关于设计的小技巧.只要掌握了它们,我们就能

冷门却使用的 javascript 技巧

前端已经被玩儿坏了!像用近似乱码的 javascript 拼一个图形,而且可以正常运行等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以jav