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没有问 ...

随机推荐

[Linux] - 利用ping给端口加密，限制访问
Linux中,想对特定的端口加密访问,可以使用iptables的ping方式. 作用访问被限制的端口,必需先ping发送对应的字节包(字节包大小可自行设置,此为密钥)才能访问成功! 下边是对SSH的 ...
C#语法——泛型的多种应用 C#语法——await与async的正确打开方式 C#线程安全使用（五） C#语法——元组类型好好耕耘 redis和memcached的区别
C#语法——泛型的多种应用本篇文章主要介绍泛型的应用. 泛型是.NET Framework 2.0 版类库就已经提供的语法,主要用于提高代码的可重用性.类型安全性和效率. 泛型的定义下面定义了 ...
SQL SERVER数据库删除LOG文件和清空日志的方案
原文:SQL SERVER数据库删除LOG文件和清空日志的方案数据库在使用过程中会使日志文件不断增加,使得数据库的性能下降,并且占用大量的磁盘空间.SQL Server数据库都有log文件,log文 ...
利用百度API(js)，怎样通过地址获取经纬度
根据经纬度找到具体地址:http://api.map.baidu.com/geocoder?location=纬度,经度&output=输出格式类型&key=用户密钥如:http:// ...
深度学习卷积网络中反卷积/转置卷积的理解 transposed conv/deconv
搞明白了卷积网络中所谓deconv到底是个什么东西后,不写下来怕又忘记,根据参考资料,加上我自己的理解,记录在这篇博客里. 先来规范表达为了方便理解,本文出现的举例情况都是2D矩阵卷积,卷积输入和核 ...
【原创深度学习与TensorFlow 动手实践系列 - 3】第三课：卷积神经网络 - 基础篇
[原创深度学习与TensorFlow 动手实践系列 - 3]第三课:卷积神经网络 - 基础篇提纲: 1. 链式反向梯度传到 2. 卷积神经网络 - 卷积层 3. 卷积神经网络 - 功能层 4. 实 ...
iOS最新Mac OS X 10.11之后安装cocoapods及使用详解
iOS 最新版 CocoaPods 的安装流程一.安装方法: 1.移除现有Ruby默认源 gem sources --remove https://rubygems.org/ 为了提高安装的成功几率 ...
bootstrapTable treegrid的使用
最近打算自己弄一个后台,在整顿树形插件的时候,遇到问题,bootstrapTable treegrid最开始是怎么都显示不了树形,然后是数据出不来, 现在来记录下. 问题1:最开始怎么都显示不出来的问 ...
git 创建tag , 查看tag ，删除tag
简介用git了很久了,也喜欢这个版本控制工具,今天来分享下,怎么用命令创建tag,查看tag,删除tag和把本地tag推到远程git服务器上 C:\Users\\WandaPuHuiProject ...
利用SEH防范BP(int 3)断点
利用SEH技术实现反跟踪,这个方法比单纯用判断API函数第一个字节是否为断点更加有效,可以防止在API函数内部的多处地址设置断点通过int 3指令故意产生一个异常,从而让系统转入自己的异常处理函数, ...

filter滤镜效果(css3属性)

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

随机推荐

热门专题