jquery css(filter_'gray'),css3 filter的十种特效

filter默认值是none，他不具备继承性，其中filter-function具有一下属性：

grayscale灰度

sepia褐色(求专业指点翻译)

saturate饱和度

hue-rotate色相旋转

invert反色

opacity透明度

brightness亮度

contrast对比度

blur模糊

drop-shadow阴影

一、grayscale灰度

使用这个特效，会把图片变成灰色的，也就是说你的图片将只有两种颜色“黑色”和“白色”。

.grayscale{

-webkit-filter: grayscale();

}

默认值：100％，

如果你在grayscale()中没有任何参数值，将会以“100%”渲染。其效果下图所示：

二、sepia

sepia不知道如何译，暂时就叫他“褐色”，使用这种效果，你的图片好像很古老的一样

.sepia{

-webkit-filter:sepia(1);

}

默认值：100％，

如果你在sepia()中没有任参数值，将会以“100％”渲染，具体效果如下：

　　 

三、saturate饱和度

saturat是用来改变图片的饱和度

.saturate{

-webkit-filter:saturate(0.5);

}

如果我们将其值变大到300%

.saturate{

-webkit-filter:saturate(3);

}

具体效果如下：

四、hue-rotate色相旋转

hue-rotate用来改变图片的色相

.hue-rotate{

-webkit-filter:hue-rotate(40deg);

}

默认值：0deg

　　　

五、invert反色

invert做出来的效果就像是我们照相机底面的效果一样

.invert{

-webkit-filter:invert(1);

}

六、opacity透明度

这个就很好理解了，改变图片的透明度

.opacity{

-webkit-filter:opacity(0.2);

}

默认值：100%

  

七、brightness亮度

改变图片的亮度

.brightness{

-webkit-filter:brightness(0.5);

}

如果它的值为1以下,就是逐渐变暗的，为1以上是逐渐变亮

默认值：100％

八、contrast对比度

改变图片的对比度，整个psd的，都懂这个意思

.contrast{

-webkit-filter:contrast(2);

}

默认值：100％

九、blur模糊

一看字面意思就知道了，改变图片的清晰度

.blur{

-webkit-filter:blur(3px);

}

默认值：0

十、drop-shadow阴影

这个跟box-shadow的效果一样，只是把这个阴影效果图片了。

.drop-shadow{

-webkit-filter:drop-shadow(5px 5px 5px gray);

}

上面就是我为大家总结的filter属性的十种效果，希望能给大家带来一些帮助。

[转]CSS3 Filter的十种特效

最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...

CSS3 Filter特效

CSS3 filter和IE的filter完全是两样东东. Filters主要是运用在图片上,以实现一些特效.(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用. 语法 elm { ...

css3图片模糊过滤特效

体验效果:点击这里查看效果 代码如下:quot ...

jQuery+CSS3文字跑马灯特效

jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

使用css3 filter 实现移入背景变色效果

CSS3 Filter详解(改变模糊度 亮度 透明度等方法)

CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...

CSS3 filter:drop-shadow滤镜与box-shadow区别应用 抄的

CSS3 filter:drop-shadow滤镜与box-shadow区别应用 这篇文章发布于 2016年05月18日,星期三,01:07,归类于 css相关. 阅读 5777 次, 今日 12 次 ...

HTML5+CSS3鼠标悬停图片特效

点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

6种炫酷的CSS3按钮边框动画特效

6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

随机推荐

[React] React Router: hashHistory vs browserHistory

In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browse ...

Storm Topology Parallelism

Understanding the Parallelism of a Storm Topology What makes a running topology: worker processes, e ...

[poj3254]Corn Fields_状压dp

Corn Fields poj3254 题目大意:给你一个n*m的地,每一块地可以种或不种,两块种过的地不能挨着,可以一块都不种,问所有的种地方案数. 注释:读入用0和1,1<=n,m<= ...

【shiro】&lpar;1&rpar;---了解权限管理

了解权限管理 一.概念 1.什么是权限管理 只要有用户参与的系统一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问而且只能访问自己被授权的资源. 权限管理包 ...

TensorFlow中的设备管理——Device的创建与注册机制

背景 [作者:DeepLearningStack,阿里巴巴算法工程师,开源TensorFlow Contributor] 作为一款优秀的异构深度学习算法框架,TensorFlow可以在多种设备上运行算 ...

计算2个时间之间经过多少Ticks

Ticks是一个周期,存储的是一百纳秒,换算为秒,一千万分之一秒.我们需要计算2个时间之间,经过多少Ticks,可以使用下面的方法来实现,使用2个时间相减. 得到结果为正数,是使用较晚的时间减去较早的 ...

pip list 和 pip freeze

https://blog.csdn.net/vitaminc4/article/details/76576956 Pip’s documentation statespip     descripti ...

HTML5学习笔记3

7.文档元素 文档元素的主要作用是划分各个不同的内容,让整个页面布局清晰明快,让整个布局具有语义,进一步替代div.基本上没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念. h1~h6 ...

windows 如何查看端口占用进程ID 进程名称 强制结束进程

1.查看指定端口的占用情况C:\>netstat -aon|findstr "9050" 协议    本地地址                     外部地址        ...

【2016 ICPC亚洲区域赛北京站 E】What a Ridiculous Election(BFS预处理)

Description In country Light Tower, a presidential election is going on. There are two candidates,   ...