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

随机推荐

asp.net中实现群发邮件功能
前段时间在帮老师开发的网站中需要用到一个群发邮件的功能,而自己之前学习cms系统的时候用的we7的群发邮件功能也有一些问题,于是乎便自己去网上查了一下资料,自己总结了一下,并且封装成了一个类,亲测有用 ...
wordpress无法安装这个包。: PCLZIP_ERR_MISSING_FILE (-4) : Missing archive file 'C:\WINDOWS\TEMP/wordpress-4.tmp'
朋友的wp博客好久没管理了,让ytkah帮忙打理一下,进到后台发现版本还是3.9的,那是比较早以前的版本了,早该升级了. 在升级wordpress时出现以下错误: 无法安装这个包: PCLZIP_ER ...
no module named firefly.master.master
因为没有安装firefly python setup.py install
IOS 提交审核，遇到Missing Push Notification Entitlement 问题。
貌似不影响提交........还是有人提交成了. 昨天晚上提交软件审核,遇到了Missing Push Notification Entitlement 的问题. 问题起因:这个版本我添加了PUSH推 ...
HDU 2843 I Will Win（概率题？，怨念颇深，简单）
题目真不想说什么,,,这神题真讨厌,,,多校的.. //又是一道神题... #include<stdio.h> #include<string.h> //最大公约数 int ...
树莓派/RaspberryPi 内核编译
1.获取所需源码 1)下载地址: 官方网址:https://github.com/raspberrypi 上面列出了树莓派所有的开源软件: linux:内核源码 tools:编译内核和其他源码所需的工 ...
C#中对象的输出
假设有个Costmer类如下: class Costmer { public string Id { get; set; } public string City { get; set; } publ ...
Spring REST for DELETE Request Method Not Supoorted
http://stackoverflow.com/questions/22055251/sending-data-with-angularjs-http-delete-request I have a ...
delphi中的Label控件背景透明
Label1.Transparent:=true;你在它的属性窗口把它的Transparent属性改成TRUE就行了来自为知笔记(Wiz)
Win软件私家珍藏-常用软件工具使用总结
原文:Win软件私家珍藏-常用软件工具使用总结 Windowns常用软件看图 FastStoneImageViewer 免费软件,好用到爆!没广告!功能齐全!不光能看图,还能修图! Picasa3 ...

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

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

随机推荐

热门专题