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没有问 ...
随机推荐
- 13、spark-submit
- 20180821 Python学习笔记：如何获取当前程序路径
20180821 Python学习笔记:如何获取当前程序路径 启动的脚本的路径为:D:\WORK\gitbase\ShenzhenHouseInfoCrawler\main.py 当前脚本的路径为:D ...
- AndroidStudio中Handler类的内存溢出风险
package com.test.king.xmlparser; import android.annotation.SuppressLint; import android.app.Activity ...
- grid - 隐式网格
当网格项目确认在显式网格之外时就会创建隐性网格,当没有足够的空间或者显式的网格轨道来设置网格项目,此时网格项目就会自动创建隐式网格. 隐式网格可以定义:grid-auto-rows.grid-auto ...
- 一步步教你轻松学支持向量机SVM算法之案例篇2
一步步教你轻松学支持向量机SVM算法之案例篇2 (白宁超 2018年10月22日10:09:07) 摘要:支持向量机即SVM(Support Vector Machine) ,是一种监督学习算法,属于 ...
- PHP判断一个JSON对象是否含有某一个属性的方法
property_exists比如:var json={"code":400,"msg":"User Err"} var rest=prop ...
- 转发：entos7修改文件夹权限和用户名用户组
Linux系统下经常遇到文件或者文件夹的权限问题,或者是因为文件夹所属的用户问题而没有访问的权限.根据我自己遇到的情况,对这类问题做一个小结.在命令行使用命令“ll”或者“ls -a”,可以查看文件或 ...
- Android报“android.content.res.Resources$NotFoundException: String resource ID #0x2”错误
Android报“android.content.res.Resources$NotFoundException: String resource ID #0x2”错误 当调用setText()方法时 ...
- github上总结的python资源列表【转】
Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python 资源列 ...
- Jenkins持续集成 入门实践
本文测试环境: ASP.NET MVC项目,Windows 7环境,SVN代码仓库, MSBuild,TortoiseSVN 持续集成这种工具很多了,Jenkins比较常用,他的原理就是一个服务,有一 ...