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方式).那么你可以通过火狐浏 ...

随机推荐

使用feof()函数判断文件是否结束
课本上时这样写的:(用putchar(ch);代表对取出来的字符的处理.) while(!feof(fp)) { ch=fgetc(fp); putchar(ch); } 但是,这样写的话,fgetc ...
Hello world,Hello 2015，Bye 2014
序在我写下“在”这个字的时候已经是2014-12-31 19:59,14年最后一天了,总觉得不写点东西祭奠一下那些被自己虐死的脑细胞,心里就不舒服. 那就从生活,工作,学习三个方面,总结一下吧. 生 ...
Working with LOBs in Oracle and PHP
原文链接:http://www.oracle.com/technetwork/articles/fuecks-lobs-095315.html Working with LOBs in Oracle ...
xmlns与targetNamespace
xmlns与targetNamespace xmlns与targetNamespacehttp://blog.sina.com.cn/weatry在使用XML Schema生成XML文件时,我们常常会 ...
poj 1986
Distance Queries Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 8638 Accepted: 3032 ...
POJ 2001
#include<iostream> using namespace std; ; struct trienode { trienode * next[kind]; int branch; ...
传说中的WCF（5）：数据协定（a）
在第4篇中,咱们了解了发送/接收SOAP头,从本篇开头,我们不妨更深入地去探求一下有关WCF中的消息到底是啥玩意儿.WCF庞大而复杂,而从 MSDN文档中,你会看到许多很专业很抽象的东西,你不禁会问, ...
OpenGL程序运行提示glut32.dll丢失问题
转: http://blog.csdn.net/liufeng520/article/details/8064170 今天调试OpenGl的源程序,编译通过,但一运行就提示,计算机丢失 glut32. ...
Android Grapics图像类体系
【hdu3247-Resource Archiver】位压DP+AC自动机+SPFA
题意:给定n个文本串,m个病毒串,文本串重叠部分可以合并,但合并后不能含有病毒串,问所有文本串合并后最短多长. (2 <= n <= 10, 1 <= m <= 1000) 题 ...

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

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

随机推荐

热门专题