CSS3 Filter滤镜效果

关注到它是在一次分享会当中，很神奇，只需写一行代码就可以变身很美的视觉效果，这就是CSS3滤镜。

语法

filter:fuction(param);

现在浏览器支持情况比起以前乐观很多，点击查看兼容

方法

1.blur模糊

2.brightness亮度

3.contrast对比度

4.grayscale灰度

5.hue-rotate色相旋转

6.invert反色

7.opacity透明度

8.saturate饱和度

9.sepia褐色

10.drop-shadow阴影

效果（非截图）

调整数值看效果，go~

时间： 2024-10-19 16:40:17

CSS3 Filter滤镜效果的相关文章

Css3 filter(滤镜)

2015-12-20 17:05:13 css3的filter滤镜效果.... css3的filter滤镜效果,filter是W3C CSS filter Effect 1.0中定义的滤镜效果,一个使用CSS来改变图片的模糊度.亮度.对比度.饱和度等等效果的过滤器. index.html中的代码如下: style.css中样式设置为: 其中,background-attachment属性用于定义背景图片随滚动轴的移动方式,取值: scroll | fixed | inherit: scroll

css3 filter属性给图片添加毛玻璃模糊效果

记录下项目中关于图片模糊效果的处理,要求:背景图必须通过img标签传入,而且头像要做成圆形的示例图片: HTML代码: <div class="introBox">  <div class="imgShow"> <img class="imgBground" src="resources/images/1.jpg" >

CSS3 Filter的十种特效

发布作者:萧强发布时间:2015-09-24 阅读次数:3000 最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇.细一看,这些效果就像是photoshop整出来的一样,其实是真是这样的,有很多效果都是类似于photoshop中的特效.不过有一点大家需要特别的注意:此处的CSS3

Css3 filter图片处理

CSS3 增加了filter,即过滤功能,此功能非IE得filter 我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇.细一看,这些效果就像是photoshop整出来的一样,其实是真是这样的,有很多效果都是类似于photoshop中的特效.不过有一点大家需要特别的注意:此处的CSS3 filter和css filter完全是两样东东.更不是我们一直说的IE滤镜.具体所指的是什么?大家感兴趣的可以点击这里.我就不多说了,因为说也说不清楚,我只想和大家一起探讨的是如休整使用这个

浅谈CSS3 Filter的10种特效

Filters主要是运用在图片上,以实现一些特效(尽管他们也能运用于video上).但是,我们主要讨论的是Filter图片上的运用. 再来,介绍一下Filters的语法:Filters使用时候的语法非常简单,例如: elm { filter: none | <filter-function > [ <filter-function> ]* } 它的默认值是none,且不具备继承性.其中filter-function具有以下可选值: 1.grayscale灰度 2.sepia褐色 3

9个有用的CSS3 Filter

昨天开通了博客园的博客,感谢这里.虽然关注这里有好几年了,也伴随我的成长给了我不少的帮助,但是一直也没自己开通一个技术博客,感觉浪费了不少大好时光啊.. 第一天开通博客就copy了别人的文章,惭愧……觉得好文章还是要留下来好,不管是不是抄的,以后都会经常来看的. 一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要

CSS3 Filter特效

CSS3 filter和IE的filter完全是两样东东. Filters主要是运用在图片上,以实现一些特效.(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用. 语法 elm { filter: none | <filter-function > [ <filter-function> ]* } 其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选: grayscale灰度 sepia褐色(求专业指点翻译) saturate饱

css: CSS3 filter(滤镜) 的使用

css3 filter属性在项目中的应用

css3 属性filter应用在项目里. 语法: <filter>: 要使用的滤镜效果.多个滤镜之间用空格隔开. 设置或检索对象所应用的滤镜效果. 最常用的滤镜效果是不透明效果,如果要实现50%的不透明度(其它高级浏览器的实现参阅opacity): 实例: HTML: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css3-图形挤压变形动画特效</title> 5 <meta char