• Filter属性介绍
  • Alpha滤镜的使用
  • Blur滤镜的使用
  • Filph、Filpv滤镜
  • DropShadow滤镜
  • Glow 滤镜
  • Gray ,Invert,Xray 滤镜
  • Shadow滤镜

19.1 Filter属性介绍

设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 height或 width属性,或者设定 position属性为 absolute,或者设定 display属性为 block。请参阅对象的 hasLayout属性。若要在 img对象上应用 shadow滤镜,可以在该对象 img对象的父容器上应用。滤镜的机制是可扩展的。通过利用Microsoft® DirectX® Media SDK,你可以使用C++开发和使用第三方滤镜。该属性在MAC平台上不可用。对应的脚本特性为 filter。

19.2 Alpha滤镜的使用

属性            值                说明
opacity           0-100            对象的亮度
style            1,2,3            滤镜的样式

例:Filter:alpha( opacity=100,style=3)

19.3 Blur滤镜的使用

属性            值              说明
add           true/false        是否印象派
direction        0-360            角度
strength        数字            模糊度

19.4 Fliph、Flipv滤镜

属性            值              说明
  无

19.5 DropShadow滤镜

属性            值              说明

color            颜色            阴影颜色
offx            数字            x坐标偏移

offy            数字            y坐标偏移
positive          true/false        是否建立透明

19.6 Glow 滤镜

属性             值             说明
color            颜色            发光颜色
 strength         数字            发光厚度

19.7 Gray ,Invert,Xray 滤镜

属性            值              说明
 无

19.8 Shadow 滤镜

属性            值             说明
color          颜色            阴影颜色

direction        0-360          阴影方向

strength        数字            阴影厚度

CSS滤镜的更多相关文章

  1. 让less编译通过css滤镜

    写IE6 hack的时候,发现在less中直接写css滤镜是会报错的,不能编译通过. 解决方法为:用~“”把相关的css代码包裹起来,例如: _top:~"expression(docume ...

  2. CSS 滤镜(IE浏览器专属其他浏览器不支持)

    Filter 属性介绍: 设置或检索对象所应用的滤镜或滤镜集合.此属性仅作用于有布局的对象,如块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 positi ...

  3. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  4. 运用HTML5+CSS3和CSS滤镜做的精美的登录界面

    原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...

  5. 利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的

    接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...

  6. CSS 滤镜技巧与细节

    本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 注意:ie不兼容 本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,话不多说,直接开车,语法如下: { ...

  7. 哀悼疫情,全站灰色如何实现,CSS滤镜一行代码实现

    庚子清明,以国家之名哀悼,以国家之名哀悼在新冠肺炎疫情中牺牲的烈士和逝世的同胞! 向抗疫英雄致敬! 今日打开各样的app,各大电商,爱奇艺都是灰色的 这里我也一直很好奇该功能,前端如何实现,了解过后发 ...

  8. WebRTC与CSS滤镜(CSS filter)

    我们知道了如何使用WebRTC打开摄像头,可以截取视频帧并且用canvas显示出来. 本文将滤镜与视频结合.给视频加上一层滤镜.主要使用到的是filter属性. canvas与滤镜 先来看filter ...

  9. 19,CSS 滤镜

    1.Filter 属性介绍 2.Alpha 滤镜的使用 3.Blur 滤镜的使用 4.Filph.Filpv 滤镜 5.DropShadow 滤镜 6.Glow 滤镜 7.Gray ,Invert,X ...

  10. CSS 滤镜

    声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. CSS样式表是一种为超文本标签语言提供增强补充服务的技术,可对每一个html的标签做精雕细刻的修饰.只用html制作的网页, ...

随机推荐

  1. Nandflash 驱动移植

    前段时间,研究了一下4G的Nandflash驱动.手头上只有飞凌6410BSP自带的Nandflash驱动,该驱动不支持K9GAG08U0D(2G)和K9LBG08U0D(4G)的Nandflash. ...

  2. 食物卡喉别拍背部!救了100多万人性命的“海姆立克急救法"

    先讲三个事例: 一.近日,浙江金华一个17月大的小贝边玩边吃花生,被噎住.10多分钟后,奶奶发现小贝大口喘气,以为他玩累了就抱他回家,等父母赶到送医已晚.小贝大脑受损严重-父母含泪同意放弃治疗,孩子走 ...

  3. The Material Sourcing Process Failed To Create Picking Suggestions in INVTOTRX (文档 ID 2003806.1)

    In this Document Symptoms Cause Solution References Applies to: Oracle Inventory Management - Versio ...

  4. Pyhon中的除法

    Python中分为3种除法:传统除法.精确除法.地板除. 传统除法: 如果是整数除法则执行地板除,如果是浮点数除法则执行精确除法. >>>1/2 0 >>>1.0/ ...

  5. 查询json数据结构的8种方式

    查询json数据结构的8种方式 你有没有对“在复杂的JSON数据结构中查找匹配内容”而烦恼.这里有8种不同的方式可以做到: JsonSQL JsonSQL实现了使用SQL select语句在json数 ...

  6. 中国海洋大学第四届朗讯杯高级组 Cash Cow(模拟)

    题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2721 题意: 给定n个左标,跟那n个坐标 ...

  7. bzoj2906

    显然分块,由于颜色也有区间,我们的ans[l,r,k]表示块l和块r颜色1~k的权值和所以我们块的大小要设为n^(2/3),其它没什么说的,比较水 ..,..,..] of int64; g:..,. ...

  8. OWIN katana注册中间件的几种写法

    首先特别说明下在startup中注册完中间件的两个注意事项,看到有人写的东西有误导人的作用.关于startup启动发现类的内容,参照这里 http://www.asp.net/aspnet/overv ...

  9. centos nginx 多端口配置过程记录

    1. 编辑 /usr/local/nginx/vhosts/  在此目录下增加一文件,如;ci.ainux.com,或复制一个文件 修改其中的端口和目录,更改log_format 名称 重启nginx ...

  10. 【JSP】让HTML和JSP页面不缓存从Web服务器上重新获取页面

    用户退出后,如果点击浏览器上的后退按钮,Web应用将不能正确保护受保护的页面——在Session销毁后(用户退出)受保护的JSP页重新在浏览器中显示出来. 然而,如果用户点击返回页面上的任何链接,We ...