CSS过滤器
CSS过滤器(CSS filters)最初是为了向SVG矢量图提供不同的图片效果。现在,CSS filters 不在局限于在SVG中使用,也可以在图片、文字和其它元素上使用。
CSS过滤器效果并不难理解。就像photoshop里每一个图层可以使用不同的过滤效果:正片叠加、滤色、叠加等等。CSS过滤器实现的功能与之类似,它能将图片渲染为一种特殊的效果。
CSS过滤器对页面性能是有影响的,不可以滥用。如果你整个页面很多地方都使用了CSS过滤器来渲染,那么 你的页面将会加载得十分慢。
CSS过滤器的语法非常简单:filter:属性名称(取值)。属性的取值决定该种过滤此效果的深度。例如下面grayscale属性分别取值为100%、50%和10%。
- img { -webkit-filter: grayscale(100%); filter: grayscale(100%);}
- img { -webkit-filter: grayscale(50%); filter: grayscale(50%);}
- img { -webkit-filter: grayscale(10%); filter: grayscale(10%);}
上面的语句得到的效果如下:
CSS Filter:filter: grayscale(100%);
CSS Filter:filter: grayscale(50%);
CSS Filter:filter: grayscale(10%);
上面每一个百分比数值对应一种效果,它的意思是:这张图片需要多少的灰度值。如果你需要将图片转换为黑白色,使用的值是100%。
你也可以同时为一张图片应用多个过滤器,它们会按层级的顺序被执行。例如下面的例子,图片先被转换为100%的黑白色,然后透明度降低到50%。如果你使用了很多的过滤器如:饱和度、色相反转等,那么它们的书写顺序是非常重要的,这会直接影响最终得到的效果。
- img {
- -webkit-filter: grayscale(100%) opacity(50%);
- filter: grayscale(100%) opacity(50%);
- }
CSS过滤器介绍
GRAYSCALE
Grayscale是灰度滤镜,前面已经做了介绍:
- img { -webkit-filter: grayscale(100%); filter: grayscale(100%);}
SEPIA
Sepia是复古风格滤镜。和Grayscale滤镜一样,它的取值可以从0%到100%。
- img { -webkit-filter: sepia(100%); filter: sepia(100%);}
SATURATION
Saturation是饱和度滤镜。它能将图片的颜色变得更浓烈。饱和度滤镜的最大取值不是100%,你可以指定一个很大的值,如1000,使图片的视觉效果变得非常夸张。
- img { -webkit-filter: saturate(1000%); filter: saturate(1000%);}
BLUR
Blur是模糊滤镜。它的效果和在photoshop中对图片使用高斯模糊的效果是一样的。你可以设置一个一像素为单位的值,这个值表示模糊的大小。像素值越高,图片就越模糊。
- img { -webkit-filter: blur(5px); filter: blur(5px);}
HUE-ROTATE
Hue-rotate是色相反转滤镜。这个滤镜和前面的滤镜相比有些难理解:它使用角度值来转换元素的颜色。这有一点像HSL颜色d的色环,从0度开始,旋转一周是360度。你所要做的就是选择色环上的某个点(某个角度)来作为色相反转的值。
- img { -webkit-filter: hue-rotate(45deg); filter: hue-rotate(45deg);}
- img { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg);}
- img { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
CSS hue-rotate Filter: hue-rotate(45deg);
CSS hue-rotate Filter: hue-rotate(90deg);
CSS hue-rotate Filter: hue-rotate(180deg);
INVERT
Invert是颜色反转滤镜。颜色反转滤镜可以将黑色转换为白色,红色转换为绿色等等。它有一点像色相反转滤镜,但是它的取值基于百分比,0%表示颜色不改变,100%表示颜色完全反转。
- img { -webkit-filter: invert(100%); filter: invert(100%); }
CONTRAST
Contrast是对比度滤镜。如果一张图片没有色彩对比度,它通常是一张灰度很深的图片。对比度滤镜取值100%时不会改变图片,这是图片的默认状态。如果你不想使用对比度效果,设置为0%。如果你想要一张图片有很大的对比度,或者想是图片中的元素都变成纯色,可以设置一个很大的百分比值,如2500%,当然这是一个非常夸张的值。
- img { -webkit-filter: contrast(25%); filter: contrast(25%);}
- img { -webkit-filter: contrast(2500%); filter: contrast(2500%);}
CSS contrast Filter: contrast(25%);
CSS contrast Filter: contrast(2500%);
BRIGHTNESS
Brightness是明亮度滤镜。正如它的名字,明亮度滤镜用于改变图片的明亮度。当它取值为100%的时候,图片不被改变,这和对比度滤镜是一样的。你可以增加百分比来使图片变亮,或降低百分比使图片变暗。
- img { -webkit-filter: brightness(50%); filter: brightness(50%);}
- img { -webkit-filter: brightness(150%); filter: brightness(150%);}
CSS brightness Filter: brightness(50%);
CSS brightness Filter: brightness(150%);
DROP SHADOW
Drop Shadow是阴影滤镜。你也许会问:盒子阴影和文字阴影不是有专门的CSS属性吗?为什么我们还要使用这个阴影滤镜。没错!box-shadow和text-shadow属性可以很好的工作在规则的容器和文字上,但是对于不规则的形状,它们就有些无能为力了。例如一张透明的PNG图片或一个五角星形状。Drop Shadow阴影滤镜会制作一个图形的副本,然后使用你设定的值来进行位移,并渲染为你设定的颜色。如下面的例子所示,第一个值是X方向上的位移,第二个值是Y轴方向上的位移,第三个值是模糊的大小,第四个值是模糊的颜色。
- img {
- -webkit-filter: drop-shadow(5px 5px 5px red);
- filter: drop-shadow(5px 5px 5px red);
- }
CSS过滤器的更多相关文章
- CSS 过滤器 兼容ie,火狐和谷歌
这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器. 关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个 ...
- CSS中加号、星号及其他符号的作用
在理想世界里,正确的CSS应该在任何支持CSS的浏览器里工作良好.不幸的是, 我们并不是生活在理想的世界里,浏览 器们布满了BUG和不一致.创建一个跨浏览器并且显示一致的页面,CSS开发者必须想尽办法 ...
- Google HTML/CSS代码风格指南(中文版)
原文链接:http://wncbl.cn/posts/c8e10815/ 看一下没什么印象,那就写一遍吧. 背景 本文档定义了HTML/CSS的编写格式和风格规则.它旨在提高合作和代码质量,并使其支持 ...
- 浏览器的CSS各种hack,大汇总
对着IE久了也有感觉了,在win10出新浏览器以及中国的IE6+用户没有普及新的浏览器前IE还是个坑,所以hack这东西还是要掌握一点的.不废话直接贴图 记得之前在项目里面针对IE6的hack是这样写 ...
- Google HTML/CSS/JS代码风格指南
JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- 前端性能优化(css动画篇)
正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到 ...
- XSS CSS Cross SiteScript 跨站脚本攻击
XSS攻击及防御 - 高爽|Coder - CSDN博客 https://blog.csdn.net/ghsau/article/details/17027893 XSS又称CSS,全称Cross S ...
随机推荐
- (47) odoo详细操作手册
odoo 8 详细操作手册, ERP(Odoo8.0)操作手册-v1.10(陈伟明).pdf 链接: http://pan.baidu.com/s/1hsp0bVQ 密码: r9tt 花了将近9个月时 ...
- SHAREPOINT 2013 列表之间相互关联
修改内容 1.增加列表设置,隐藏Aid字段操作 SharePoint 列表之间相互关联 例如两张列表之间的父子关系. 思路如下: 列表中新增列表项后会有一个唯一的ID,我们获取到该ID赋予子表即可将两 ...
- gulp教程之gulp-minify-css
简介: 使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存.重要:gulp-minify-css已经被废弃,请使用gulp-clean-css,用法一致. ...
- ionic 的下拉刷新 与 上拉加载
<ion-view view-title="消息通知"> <ion-content class="padding"> <!-- & ...
- ios基础篇(二十八)—— UITableView的上拉加载
本文主要展示一个demo实现UITableView的上拉加载数据: 先看看效果图: 接着上拉,加载更多数据: 主要实现的效果是在我们上拉结束拖拽之后,开始加载数据,数据加载的过程中有滚动轮提示用户正在 ...
- linux 安装mysql两种方式
yum -y install gcc gcc-c++ ncurses-devel cmake bison zlib zlib-devel libxml openssl dtrace ...
- Sql 获取向上取整、向下取整、四舍五入取整的实例
[四舍五入取整截取] select round(54.56,0) [向下取整截取] SELECT FLOOR(54.56) [向上取整截取] SELECT CEILING(13.15) --MS ...
- Java parseInt()方法
1.Java parseInt()方法 使用此方法得到的原始数据类型的一个特定的字符串. parseXxx()是一个静态方法,可以有一个参数或两个. java parseInt() 语法: sta ...
- php 的txt操作,加入类容
<?php $fr=fopen("./data/test.txt",'a'); //fopen(位置,打开方式) if(!$fr) { echo " error&q ...
- [转载]va_start和va_end使用详解
va_start和va_end使用详解 原文地址:http://www.cnblogs.com/hanyonglu/archive/2011/05/07/2039916.html 本文主要介绍va_s ...