CSS滤镜
- 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滤镜的更多相关文章
- 让less编译通过css滤镜
写IE6 hack的时候,发现在less中直接写css滤镜是会报错的,不能编译通过. 解决方法为:用~“”把相关的css代码包裹起来,例如: _top:~"expression(docume ...
- CSS 滤镜(IE浏览器专属其他浏览器不支持)
Filter 属性介绍: 设置或检索对象所应用的滤镜或滤镜集合.此属性仅作用于有布局的对象,如块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 positi ...
- 你所不知道的 CSS 滤镜技巧与细节
承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...
- 运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
- 利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的
接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...
- CSS 滤镜技巧与细节
本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 注意:ie不兼容 本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,话不多说,直接开车,语法如下: { ...
- 哀悼疫情,全站灰色如何实现,CSS滤镜一行代码实现
庚子清明,以国家之名哀悼,以国家之名哀悼在新冠肺炎疫情中牺牲的烈士和逝世的同胞! 向抗疫英雄致敬! 今日打开各样的app,各大电商,爱奇艺都是灰色的 这里我也一直很好奇该功能,前端如何实现,了解过后发 ...
- WebRTC与CSS滤镜(CSS filter)
我们知道了如何使用WebRTC打开摄像头,可以截取视频帧并且用canvas显示出来. 本文将滤镜与视频结合.给视频加上一层滤镜.主要使用到的是filter属性. canvas与滤镜 先来看filter ...
- 19,CSS 滤镜
1.Filter 属性介绍 2.Alpha 滤镜的使用 3.Blur 滤镜的使用 4.Filph.Filpv 滤镜 5.DropShadow 滤镜 6.Glow 滤镜 7.Gray ,Invert,X ...
- CSS 滤镜
声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. CSS样式表是一种为超文本标签语言提供增强补充服务的技术,可对每一个html的标签做精雕细刻的修饰.只用html制作的网页, ...
随机推荐
- js 实现list类
js中没有list类,可以使用Array来实现list类 (function(win) { var ArrayList = function() { this.datas = []; }; var p ...
- POJ1850——Code(组合数学)
Code DescriptionTransmitting and memorizing information is a task that requires different coding sys ...
- Android-xUtils框架介绍(四)
今天介绍xUtils的最后一个模块——HttpUtils,拖了那么久,终于要结束了.另外,码字不易,如果大家有什么疑问和见解,欢迎大家留言讨论.HttpUtils是解决日常工作过程中繁杂的上传下载文件 ...
- Python图
从一位前辈的博客看到了一张图,先转过来,稍后再细看
- linux 上下文切换带来的影响
1.保存CPU寄存器中的内容 2.CPU高速缓存中的内容失效 3.重新装载页表,用于给线程程安装一个新的虚拟地址空间,页表缓存失效
- C#控件背景透明的几种解决方案
已经很少做winform程序了,最新参与了一个小项目,遇到了控件背景透明的功能要求,特在此总结一下,供有需要的同行参考. 0.背景透明的概念和分类 背景透明是啥意思呢,就是背景透明.哈哈,废话了.其实 ...
- BZOJ_1022_[SHOI2008]_小约翰的游戏John_(博弈论_反Nim游戏)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1022 反Nim游戏裸题.详见论文<组合游戏略述——浅谈SG游戏的若干拓展及变形>. ...
- [swustoj 917] K-lucky-number
K-lucky-number(0917) 问题描述 K-lucky-number is defined as add up the number of each bit is a multiple o ...
- Java [Leetcode 104]Maximum Depth of Binary Tree
题目描述: Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along th ...
- 《深入Java虚拟机学习笔记》- 第6章 class文件
一.class文件内容 Java class文件是对Java程序二进制文件格式的精确定义.每一个Java class文件都对一个Java类或者Java接口作出了全面描述.一个class文件只 能包含一 ...