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

随机推荐

一个利用window.name实现的windowStorage
//key:value|key:value var windowStorage = { _inited: false, _data: {}, init: function(str) { var tmp ...
Mozilla推荐的CSS属性书写顺序及命名规则
传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...
使用 Swagger UI 与 Swashbuckle 创建 RESTful Web API 帮助文件
作者:Sreekanth Mothukuru 2016年2月18日本文旨在介绍如何使用常用的 Swagger 和 Swashbuckle 框架创建描述 Restful API 的交互界面,并为 AP ...
FM算法
1.FM背景在计算广告中,CTR预估(click-through rate)是非常重要的一个环节,因为DSP后面的出价要依赖于CTR预估的结果.在前面的相关博文中,我们已经提到了CTR中相关特征工程 ...
一道有趣的javascript编程题
题目:实现以下功能 1. 点击按钮“打开新窗口”,打开新的子页面,要求新窗口的大小为400px X 200px 2. 输入地址信息,点击“确定”按钮,关闭该页面 3. 将子页面中输入的地址信息,回传到 ...
Light OJ 1364 Expected Cards (期望dp，好题)
题目自己看吧,不想赘述. 参考链接:http://www.cnblogs.com/jianglangcaijin/archive/2013/01/02/2842389.html #include &l ...
C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题
客服端: 在A项目下面建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...
ring0 与 ring3 层之间的交互
在进行Windows的ring0层开发时,必不可免的要与 ring3 层进行交互.进行数据间的相互传输.可用的方法有DeviceIoCntrol,ReadFile.我平常都是用的DeviceIoCon ...
PowerDesigner 将CDM、PDM导出为图片
选中所有对象(Ctrl + A),复制(Ctrl + C),打开系统的“画图”软件,粘贴(Ctrl + V),另存为BMP或者PNG格式即可. 如果是将图片粘贴到Word文档也是可行的.
UITableViewController 滚动引起的cocos2d动画暂停问题的解决
UITableViewController 滚动引起的cocos2d动画暂停问题的解决之前在使用UITableViewController进行滚动时,cocos2d的动画会暂停,直至滚动完毕才会继续 ...

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

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

随机推荐

热门专题