filter滤镜效果(css3属性)

<!DOCTYPE html>

<html>

    <head>

    <style>

    img {

        width: 33%;

        height: auto;

        float: left;

    }

    .blur {-webkit-filter: blur(4px);filter: blur(4px);}

    .brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}

    .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}

    .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}

    .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}

    .invert {-webkit-filter: invert(100%);filter: invert(100%);}

    .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}

    .saturate {-webkit-filter: saturate(7); filter: saturate(7);}

    .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}

    .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

    </style>

    </head>

<body>

    <p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>

    <img src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="blur" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="brightness" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="contrast" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="grayscale" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="huerotate" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="invert" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="opacity" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="saturate" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="sepia" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

    <img class="shadow" src="http://img0.imgtn.bdimg.com/it/u=3946057059,755959423&fm=200&gp=0.jpg" alt="Pineapple" width="300" height="300">

</body>

</html>

wc3 链接 http://www.runoob.com/cssref/css3-pr-filter.html

filter滤镜效果(css3属性)的更多相关文章

关于css3属性filter
今天看百度百科,看到其中一页所有图片背景全都设置为了灰白色,于是研究了番,发现是应用了filter滤镜这个属性. // 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-fi ...
css3属性兼容性
来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...
css3属性 -webkit-filter
css3属性 -webkit-filter -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.下面咱们就学习一下filter这个属性吧. 现在规范中支 ...
如何处理CSS3属性前缀
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
CSS3属性 box-shadow 向框添加一个或多个阴影
CSS3属性利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性一.下载您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西首先说说.htc文件 ...
实用的CSS3属性和使用技巧
CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...
H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...

随机推荐

Scala编程进阶
跳出循环语句的3种方法... 2 多维数组... 3 Java数组与Scala数组缓冲的隐式转换... 3 Java Map与Scala Map的隐式转换... 3 Tuple拉链操作... 4 内部 ...
GoAccess日志分析工具
1.1 GoAccess简介 GoAccess是一个非常良心的开源软件,它的良心之处体现在如下方面: 1)安装简单: 2)操作容易: 3)界面酷炫: GoAccess 官网 https://goacc ...
dubbo常见错误
1.dubbo zookeeper注册中心provider的ip地址为内网ip,导致consumer连不上我用的阿里云的服务器,host默认配置了内网ip,注销或删除即可 vim /etc/host ...
科技论文之Latex公式&符号
近期在写文章.有好多数学公式的命令都忘记了. 今天索性一起整理下. 1 能够在文章的作者上引用的符号 2 一些括号使用方法 3 一些高等数学的公式 4 交,并集 5 一些二项式 6 矩阵写法 7 ...
Python实现多进程
Python可以实现多线程,但是因为Global Interpreter Lock (GIL),Python的多线程只能使用一个CPU内核,即一个时间只有一个线程在运行,多线程只是不同线程之间的切换, ...
BAT 删除隐藏文件
删除文件 del命令参数说明/F 强制删除文件./S 从所有子目录删除指定文件./Q 安静模式.删除全局通配符时,不要求确认./A 根据属性选择要删除的文件. 删除指 ...
积木式编程——自制app点灯
技术:51单片机.串口.蓝牙.积木式编程概述这里简单入门了积木式编程,做了个简易APP用来开灯关灯,当然你可以继续添加内容,可以做智能家居.遥控汽车和环境监控等等. 详细代码下载:http: ...
MySQL技术内幕读书笔记（三）——文件
目录文件参数文件日志文件套接字文件 pid文件表结构定义文件 INNODB存储引擎文件文件有以下类型文件参数文件:告诉MYSQL实例启动时在哪里找到数据库文件,并且制定某些初始化参 ...
C# 简单POST请求同时防止中文乱码的出现
实现POST网络请求方法 public static string HttpPost(string url,string postDataStr) { string strReturn; //在转换字 ...
Linux内核调试方法总结
Linux内核调试方法总结一调试前的准备二内核中的bug 三内核调试配置选项 1 内核配置 2 调试原子操作四引发bug并打印信息 1 BUG()和BUG_ON() 2 ...

filter滤镜效果(css3属性)

filter滤镜效果(css3属性)的更多相关文章

随机推荐

热门专题