19,CSS 滤镜
1.Filter 属性介绍
2.Alpha 滤镜的使用
3.Blur 滤镜的使用
4.Filph、Filpv 滤镜
5.DropShadow 滤镜
6.Glow 滤镜
7.Gray ,Invert,Xray 滤镜
8.Shadow 滤镜
1 19.1 F Fr ilter 属性介绍
设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象，如块对象。
内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属
性为 absolute，或者设定 display 属性为 block。请参阅对象的 hasLayout 属性。若要在
img 对象上应用 shadow 滤镜，可以在该对象 img 对象的父容器上应用。滤镜的机制是可扩
展的。通过利用 Microsoft® DirectX® Media SDK，你可以使用 C++开发和使用第三方滤镜 。
该属性在 MAC 平台上不可用。对应的脚本特性为 filter。
2 19.2 a Alpha 滤镜的使用
属性 值 说明
opacity 0-100 对象的亮度
style 1,2,3 滤镜的样式
2 19.2 r Blur 滤镜的使用
属性 值 说明
add true/false 是否印象派
direction 0-360 角度
strength 数字 模糊度
3 19.3 Fliph 、 Flipv 滤镜
属性 值 说明
无
4 19.4 w DropShadow 滤镜
属性 值 说明
color 颜色 阴影颜色
offx 数字 x 坐标偏移
offy 数字 y 坐标偏移
positive true/false 是否建立透明
19.5 5 w Glow 滤镜
属性 值 说明
color 颜色 发光颜色
strength 数字 发光厚度
6 19.6 y Gray y ,Invert,Xray 滤镜
属性 值 说明
无
7 19.7 w Shadow 滤镜
属性 值 说明
color 颜色 阴影颜色
direction 0-360 阴影方向
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{
background: orange;
width:200px;
height:150px；
}
img{
filter: alpha(style=2,opacity=70);
} </style>
</head> <body>
<div>滤镜的使用</div>
<img src="data:images/pic7.jpg"/> </body>
</html>
19,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 ...
- CSS滤镜
Filter属性介绍 Alpha滤镜的使用 Blur滤镜的使用 Filph.Filpv滤镜 DropShadow滤镜 Glow 滤镜 Gray ,Invert,Xray 滤镜 Shadow滤镜 19. ...
随机推荐
- SSH X11 MAC
1. X11 for Mac 2. Ubuntu下通过SSH转发X窗口需要具备的条件 原文:http://unix.stackexchange.com/questions/12755/how- ...
- Swift-函数学习
函数:函数是独立的代码块,执行特定的任务. Swift 的统一函数语法足够灵活,能表达没有参数名称的简单的 C 型函数的任何东西,本地和外部复杂 Objective-C-style 方法参数名称为每个 ...
- JAVA实现Base64编码的三种方式
摘要: Javabase64编码的三种方式 有如下三种方式: 方式一:commons-codec.jar Java代码 1. String base64String="whuang12 ...
- 这样入门asp.net core 之 静态文件
本文章主要说明asp.net core中静态资源处理方案: 一.静态文件服务 首先明确contentRoot和webroot这两个概念 contentRoot:web的项目文件夹,其中包含webroo ...
- 关于原生js中bind函数的实现
今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下, if (!Function.prototype.bind) { Function.prototype.bin ...
- Android UI性能优化实战 识别绘制中的性能问题
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45556391: 本文出自:[张鸿洋的博客] 1.概述 2015年初google ...
- 1. 开篇-springboot环境搭建
最初学习strurs2时,虽然觉得也挺好用的,但也有一些不便的地方:1. 模型绑定必须要在Action中声明对应模型的成员变量:2. Action中对外提供调用的接口必须明确注明:3. 要声明一大堆的 ...
- 自动化测试用例getText()获取某一个元素的值返回null或空
问题描述 页面上一个元素无法获取它的值. 用getText() 获取该元素的值返回null或空. 根本原因 ? 需要更多了解dom结构 解决办法 用getAttribute("value&q ...
- 时序数据库InfluxDB使用详解
1 安装配置 这里说一下使用docker容器运行influxdb的步骤,物理机安装请参照官方文档.拉取镜像文件后运行即可,当前最新版本是1.3.5.启动容器时设置挂载的数据目录和开放端口.Influx ...
- BZOJ_4016_[FJOI2014]最短路径树问题_最短路+点分治
BZOJ_4016_[FJOI2014]最短路径树问题_最短路+点分治 Description 给一个包含n个点,m条边的无向连通图.从顶点1出发,往其余所有点分别走一次并返回. 往某一个点走时,选择 ...