CSS 滤镜（IE浏览器专属其他浏览器不支持）

Filter 属性介绍：

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

Alpha 滤镜的使用：

属性值说明
opacity 0-100(100是原来的亮度) 对象的亮度
style 1,2,3（取值就这三个）滤镜的样式

两个属性可以一起用，用逗号分隔

<!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=utf-8" />

<title>CSS 滤镜</title>

<style type="text/css">

div{

    background-color:#FC3;

    width:200px;

    height:100px;

    filter:Alpha(style=3);

}

img{

    filter:Alpha(style=3);

}

</style>

</head>

<body>

<div>PHP100.COM中文网</div>

<img src="../../../素材库/m_1266887233273.jpg"/>

</body>

</html>

跨浏览器将一个元素设置成透明

filter:alpha(opacity=70); -moz-opacity:0.7; opacity: 0.7;

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

<!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=utf-8" />

<title>CSS 滤镜</title>

<style type="text/css">

div{

    background-color:#FC3;

    width:200px;

    height:100px;

    filter:Alpha(style=3);

}

img{

    filter:blur(add=true,strength=30);

}

</style>

</head>

<body>

<div>PHP100.COM中文网</div>

<img src="../../../素材库/m_1266887233273.jpg"/>

</body>

</html>

Fliph、Flipv滤镜：没有属性

Filph：垂直翻转 Flipv：水平翻转

<!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=utf-8" />

<title>CSS 滤镜</title>

<style type="text/css">

div{

    background-color:#FC3;

    width:200px;

    height:100px;

    filter:Fliph();

}

img{

    filter:Flipv()Fliph();

}

</style>

</head>

<body>

<div>PHP100.COM中文网</div>

<img src="../../../素材库/m_1266887233273.jpg"/>

</body>

</html>

DropShadow 滤镜（投影）
属性值说明
color 颜色阴影颜色
offx 数字 x 坐标偏移
offy 数字 y 坐标偏移
positive true/false 是否建立透明

<!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=utf-8" />

<title>CSS 滤镜</title>

<style type="text/css">

div{

    width:200px;

    height:100px;

    filter:DropShadow(color=#0F0,offx=30,offy=40);

}

img{

}

</style>

</head>

<body>

<div>PHP100.COM中文网</div>

<img src="../../../素材库/m_1266887233273.jpg"/>

</body>

</html>

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

<!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=utf-8" />

<title>CSS 滤镜</title>

<style type="text/css">

div{

    padding:30px;

    width:200px;

    height:100px;

    filter:glow(color=#0F0,strength=50);

}

img{

}

</style>

</head>

<body>

<div>PHP100.COM中文网</div>

<img src="../../../素材库/m_1266887233273.jpg"/>

</body>

</html>

Gray ,Invert,Xray 滤镜：无属性
Gray ：黑白照 Invert：照片反光 Xray： x—射线

<!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=utf-8" />

<title>CSS 滤镜</title>

<style type="text/css">

div{

    background-color:#CF0;

    padding:30px;

    width:200px;

    height:100px;

}

img{

    filter:invert();

}

</style>

</head>

<body>

<div>PHP100.COM中文网</div>

<img src="../../../素材库/m_1266887233273.jpg"/>

</body>

</html>

Shadow 滤镜（阴影）
属性值说明
color 颜色阴影颜色
direction 0-360 阴影方向

strength 数字厚度

 <!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=utf-8" />

 <title>CSS 滤镜</title>

 <style type="text/css">

 div{

     filter:shadow(color=red,direction=135);

     padding:30px;

     width:200px;

     height:100px;

 }

 img{

 }

 </style>

 </head>

 <body>

 <div>PHP100.COM中文网</div>

 <img src="../../../素材库/m_1266887233273.jpg"/>

 </body>

 </html>

CSS 滤镜（IE浏览器专属其他浏览器不支持）的更多相关文章

div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 ...
css 框架——base.css，作用是重设浏览器默认样式和提供通用原子类。自己留存
今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能 ...
判断是否是ie浏览器或者edge浏览器，引入特定的css
判断是否是ie浏览器或者edge浏览器,引入特定的css 我本来要用ie浏览器专有的条件注释语句来引入,但是发现都没有效果,网上有说ie10之后的浏览器取消了条件语句,反正我是只要是IE都没有试出效果 ...
CSS 滤镜
声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. CSS样式表是一种为超文本标签语言提供增强补充服务的技术,可对每一个html的标签做精雕细刻的修饰.只用html制作的网页, ...
利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的
接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...
WebRTC与CSS滤镜（CSS filter）
我们知道了如何使用WebRTC打开摄像头,可以截取视频帧并且用canvas显示出来. 本文将滤镜与视频结合.给视频加上一层滤镜.主要使用到的是filter属性. canvas与滤镜先来看filter ...
移动端浏览器和微信浏览器上禁止body的滚动条
一般禁止body滚动的做法就是设置overflow:hidden. 但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改 ...
用PC浏览器模拟手机浏览器（一）：无扩展版
想浏览手机版,打开对应网址却跳转到PC版?怎么办? 下面咱们来说下在只是安装了浏览器,无需其他安装操作的情况下来怎么用PC浏览器模拟手机浏览器,然后访问手机站点. 浏览器众多,IE系列的咱就不考虑了, ...
java模拟浏览器包selenium整合了htmlunit，火狐浏览器，IE浏览器，opare浏览器驱
//如果网页源码中有些内容是js渲染过来的,那你通过HttpClient直接取肯定取不到,但是这些数据一般都是通过异步请求传过来的(一般都是通过ajax的get或者post方式).那么你可以通过火狐浏 ...

随机推荐

我收集到的最好的jQuery和CSS3导航菜单
jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...
javascript实现数据结构：串--堆分配存储表示
堆分配存储表示这种存储表示的特点是,仍以一组地址连续的存储单元存放串值字符序列,但它们的存储空间是在程序执行过程中动态分配而得. 结构图: 实现: function HString(){ this. ...
Unity3d之音效播放和调用手机震动
http://blog.csdn.net/sunshine_1984/article/details/12943979 今天研究了下Unity3d音效播放相关内容,整理下实现细节. 1,添加音效文件到 ...
总结 | 如何测试你自己的 RubyGem
如何测试一个Gem gem 开发完了,想要给别人用,那就需要测试啊,测试一个 gem 其实很简单,这里我们用 minitest 为例, rspec 也一样适用.先来看看我们当前这个 gem 的目录结构 ...
ADs系列之通用数据解析服务GAS(即将开源)
面对成百上千的生产系统用户操作数据接入落地,你是否厌倦了每次机械编写打包解包的代码?对一次性接入多个数据的时候,还要对不同人联调,费时费力,你是否还会手忙脚乱,忙中不断出错?是否当数据出问题了,用的时 ...
java基本数据类型存储范围
数据类型可以分为两大类: 1)基本类型: 2)扩展类型. 先来看一下Java语言的基本数据类型.它包括类型描述取值范围 Boolean 布尔型只有两个值true.false Char ...
Python十分钟学会
初试牛刀假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手册(Cheat ...
简单Ajax例子
一.概述 1.程序执行流程: (1)点击id="testBtn"的按钮,触发validate(); (2)validate()中有调用request.open方法与server交互 ...
Keil MDK编译器(V4.03)与J-LINK使用
前几天进手了一个J-LINK,因为H-JTAG毕竟对MDK支持的不是太完美,比如用keil mdk上面的下载按钮烧录程序,不是直接就能烧录进去,而是弹出H-Flash软件,再手工选择文件烧录:而且用H ...
android-exploitme（七）：高级加密
在上一个议题上我们解释了为什么不能把信息明文保存在设备上,应该加密,那么加密就是安全的吗? 下面来看一下, 编译BasicEncryptionSolution.apk,安装

CSS 滤镜（IE浏览器专属其他浏览器不支持）

CSS 滤镜（IE浏览器专属其他浏览器不支持）的更多相关文章

随机推荐

热门专题