CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS FILTERS:CSS过滤器能够做什么?

CSS FILTERS:CSS过滤器能够做什么?

CSS过滤器(CSS filters)已经被推出有很长一段时间了。它最初是为了向SVG矢量图提供不同的图片效果。现在,CSS filters 不在局限于在SVG中使用,也可以在图片、文字和其它元素上使用。

CSS过滤器(CSS filters)已经被推出有很长一段时间了。它最初是为了向SVG矢量图提供不同的图片效果。现在,CSS filters 不在局限于在SVG中使用,也可以在图片、文字和其它元素上使用。
CSS过滤器效果并不难理解。如果你曾经使用过photoshop,那么你就会知道每一个图层都可以使用不同的过滤效果:正片叠加、滤色、叠加等等。CSS过滤器实现的功能与之类似,它能将图片渲染为一种特殊的效果。
CSS过滤器对页面性能是有影响的,不可以滥用。如果你整个页面很多地方都使用了CSS过滤器来渲染,那么 你的页面将会加载得十分慢。


使用CSS过滤器


我们将使用下面的这张图片来结束各种不同的CSS过滤器效果。

CSS过滤器的语法非常简单:filter:属性名称(取值)。属性的取值决定该种过滤此效果的深度。例如下面grayscale属性分别取值为100%、50%和10%。


  1. img { -webkit-filter: grayscale(100%); filter: grayscale(100%);}
  2. img { -webkit-filter: grayscale(50%); filter: grayscale(50%);}
  3. 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%。如果你使用了很多的过滤器如:饱和度、色相反转等,那么它们的书写顺序是非常重要的,这会直接影响最终得到的效果。

  1. img {
  2.   -webkit-filter: grayscale(100%) opacity(50%);
  3.   filter: grayscale(100%) opacity(50%);
  4. }   
复制代码
CSS过滤器介绍

GRAYSCALE

Grayscale是灰度滤镜,前面已经做了介绍:

  1. img { -webkit-filter: grayscale(100%); filter: grayscale(100%);}                              
复制代码

SEPIA


Sepia是复古风格滤镜。和Grayscale滤镜一样,它的取值可以从0%到100%。


  1. img { -webkit-filter: sepia(100%); filter: sepia(100%);}
复制代码


SATURATION

Saturation是饱和度滤镜。它能将图片的颜色变得更浓烈。饱和度滤镜的最大取值不是100%,你可以指定一个很大的值,如1000,使图片的视觉效果变得非常夸张。

  1. img { -webkit-filter: saturate(1000%); filter: saturate(1000%);}                              
复制代码

BLUR


Blur是模糊滤镜。它的效果和在photoshop中对图片使用高斯模糊的效果是一样的。你可以设置一个一像素为单位的值,这个值表示模糊的大小。像素值越高,图片就越模糊。

  1. img { -webkit-filter: blur(5px); filter: blur(5px);}   
复制代码

HUE-ROTATE


Hue-rotate是色相反转滤镜。这个滤镜和前面的滤镜相比有些难理解:它使用角度值来转换元素的颜色。这有一点像HSL颜色d的色环,从0度开始,旋转一周是360度。你所要做的就是选择色环上的某个点(某个角度)来作为色相反转的值。

  1. img { -webkit-filter: hue-rotate(45deg); filter: hue-rotate(45deg);}
  2. img { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg);}
  3. 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%表示颜色完全反转。

  1. img { -webkit-filter: invert(100%); filter: invert(100%); }   
复制代码


CONTRAST


Contrast是对比度滤镜。如果一张图片没有色彩对比度,它通常是一张灰度很深的图片。对比度滤镜取值100%时不会改变图片,这是图片的默认状态。如果你不想使用对比度效果,设置为0%。如果你想要一张图片有很大的对比度,或者想是图片中的元素都变成纯色,可以设置一个很大的百分比值,如2500%,当然这是一个非常夸张的值。


  1. img { -webkit-filter: contrast(25%); filter: contrast(25%);}
  2. img { -webkit-filter: contrast(2500%); filter: contrast(2500%);}         
复制代码


CSS contrast Filter: contrast(25%);



CSS contrast Filter: contrast(2500%);


BRIGHTNESS

Brightness是明亮度滤镜。正如它的名字,明亮度滤镜用于改变图片的明亮度。当它取值为100%的时候,图片不被改变,这和对比度滤镜是一样的。你可以增加百分比来使图片变亮,或降低百分比使图片变暗。

  1. img { -webkit-filter: brightness(50%); filter: brightness(50%);}
  2. 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轴方向上的位移,第三个值是模糊的大小,第四个值是模糊的颜色。

  1. img {
  2.   -webkit-filter: drop-shadow(5px 5px 5px red);
  3.   filter: drop-shadow(5px 5px 5px red);
  4. }   
复制代码

小结


使用CSS过滤器可以在不使用photoshop等图像编辑软件的情况下将图片制作出各种特殊的效果。如果你想制作更复杂的图像效果,可以使用CSS的合成模式。希望这篇文章对你有所帮助!

via:http://www.htmleaf.com/ziliaoku/ ... g/201504181704.html

【CSS FILTERS:CSS过滤器能够做什么?】相关文章

1. CSS FILTERS:CSS过滤器能够做什么?

2. 我们能用HTML5 Canvas做什么?

3. CSS创始人之一Bert Bos:CSS只是进化的一部分

4. HTML5是什么?最直观的感受体验

5. HTML.Next会给我们带来什么?

6. Responsive Javascript 是什么?

7. CSS Transition (CSS过渡效果)入门

8. HTML5能够替代Flash,增强Web安全性?

9. 苹果2012年或推4G LTE版iPhone5手机

10. 三大运营商都参与TD-LTE测试

本文来源:https://www.51html5.com/a1081.html

点击展开全部

﹝CSS FILTERS:CSS过滤器能够做什么?﹞相关内容

「CSS FILTERS:CSS过滤器能够做什么?」相关专题

其它栏目

也许您还喜欢