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

随机推荐

.NET设计模式（8）：适配器模式（Adapter Pattern）（转）
概述在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维度的变化”?如何利用面向对象的技术来使得该类型能够轻松的沿着多个方向进行变化,而又不引入额外的复杂度?这就 ...
YARN的 AM与RM通信，申请资源分配过程
AppMaster向RM请求资源 MRAppMaster :serviceinit // service to allocate containers from RM (if non-uber) or ...
（转）Eclipse平台技术概述
转载:周金根 http://zhoujg.blog.51cto.com/1281471/516833 Eclipse:Eclipse平台技术概述 2010-10-19 13:35:00 标签:E ...
ZOJ3762 The Bonus Salary!(最小费用最大流)
题意:给你N个的任务一定要在每天的[Li,Ri]时段完成,然后你只有K天的时间,每个任务有个val,然后求K天里能够获得的最大bonus. 思路:拿到手第一直觉是最小费用最大流,然后不会建图,就跑去想 ...
sql 语句的各种连接
数据表: 1.两种连接表现方式一样其中 where 条件语句可以省略,当时join 的on 语句不可省略 2.左连接,右连接左连接:返回左表的所有数据,并根据条件返回左右表的连接结果,如果未匹配到 ...
最近在看 ASP.NET 5，有关官方实现的 OAuth 2 包
有了官方实现的 OAuth 2 包,再扩展到国内就方便多了(懒得找第三方). 官方实现的有关授权和验证的包:https://github.com/aspnet/Security 根据这些,我就扩展了几 ...
C语言一些常用内存分配函数
首先看个问题程序(这里用的是TC编译器): #include "stdlib.h" #include "stdio.h" void main() { in ...
MySql经典语句
1.三个函数: LENGTH SUBSTR LOCATE )) order by WebSiteShopUrl desc 2.序号两种方法第一种方法: ) ) as it 第二种方法: ; ...
web.xml文件中加载顺序的优先级
在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是 ...
mysql 支持中文，防止程序乱码的方法
1. 查看你的mysql的字符设置 mysql> show variables like 'character%'; +--------------------------+---------- ...

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

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

随机推荐

热门专题