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 滤镜的更多相关文章

  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. CSS滤镜

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

随机推荐

  1. Math对象中比较常用的计算数学相关的三个方法

    Math类中提供了三个与取整有关的方法:ceil.floor.round,这些方法的作用与它们的英文名称的含义相对应,例如: ceil的英文意义是天花板,该方法就表示向上取整,所以,Math.ceil ...

  2. mint-ui之picker爬坑记

    picker的数据来源为动态获取时,数据无法正常渲染!因为方法不对,所以坑大了!深刻地体会到'业不精,我之过',谨以此文,深刻地记录一下踩坑及爬坑的整个过程,以便日后不再入坑,也给后来者提供一下参考 ...

  3. MyBatis xml配置文件详解

    http://blog.csdn.net/fenghuibian/article/details/52525671

  4. html5中让页面缩放的4种方法

    1.viewport 这种方法,不是所有的浏览器都兼容<meta name="viewport" content="width=640,minimum-scale= ...

  5. 数据结构 之 二叉堆（Heap）

    注:本节主要讨论最大堆(最小堆同理). 一.堆的概念     堆,又称二叉堆.同二叉查找树一样,堆也有两个性质,即结构性和堆序性.     1.结构性质:     堆是一棵被完全填满的二叉树,有可能的 ...

  6. Struts2(一)---struts2的环境搭建及实例

    刚刚接触struts2,有点懵懵懂懂,还是习惯于先写代码,然后慢慢来理解其中的思想. 这篇文章主要内容是strusts的环境搭建及通过一个简单的例子来理解到底是怎么使用struts来简化编程的. 1. ...

  7. Android base-adapter-helper 源码分析与扩展

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/44014941,本文出自:[张鸿洋的博客] 本篇博客是我加入Android 开源项 ...

  8. 如何设置PPT中的演讲者模式

    ①1.首先将投影设备或其它幻灯片输出设备连接到笔记本或 PC 上,在 Windows 7 中按Win 键+P 并选择扩展模式将当前笔记本或 PC 的显示器与投影显示输出设备设置为扩展模式.   ②我们 ...

  9. Python爬虫利器五之Selenium的用法

    1.简介 Selenium 是什么?一句话,自动化测试工具.它支持各种浏览器,包括 Chrome,Safari,Firefox 等主流界面式浏览器,如果你在这些浏览器里面安装一个 Selenium 的 ...

  10. Java 学习笔记 (三) Java 日期类型

    以下内容摘自:  https://www.cnblogs.com/crazylqy/p/4172324.html import java.sql.Timestamp; import java.text ...