css滤镜怎么用?

css滤镜怎么用?下面本篇文章给大家介绍一下学会使用CSS3滤镜,必需先知道的滤镜的常规用法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

说到滤镜,搞前端的应该都不陌生,因为不管是曾经还是现在,你都有可能用过或者在用Photoshop。所有滤镜在这个软件中都是按分类在菜单中。滤镜,主要是用来实现图像的各种特殊效果。

简单来说,CSS滤镜就是提供类似PS的图形特效,像模糊,锐化或元素变色等功能。通常被用于调整图片,背景和边界的渲染。这篇我来看一下CSS滤镜中那些常用的用法。

一、常用的

1、使用filter:blur(px) - 生成毛玻璃效果,值越大越模糊。

2、使用filter:drop-shadow() - 生成整体阴影效果,和box-shadow相似,但又不同。

3、使用filter:opacity(%) - 生成透明度,0%是完全不饱和,100%图像无变化。

下面我举个例子来看一下它们的用法:

CSS代码:(如下id值是设定在img元素上)

1.png

当鼠标移上去时,显示出原图的模样,具体效果如下所示:

1.gif

这样就一目了然了。

二、必需知道的

除了上面说的三种之外,CSS滤镜还有另外七种,虽然相对来说不是特别常用,但是真的特别有用,尤其是在做一个技巧性的效果的时候,需要组合这些用法,所以,也是我们必需要知道的。

下面通过一些取值来看一下单独设置时的具体效果:

1、filter: contrast(200%) - 调整图像的对比度。

2、filter: grayscale(1) - 将图像转换为灰度图像。

3、filter: invert(.9) - 反转输入图像。

4、filter:brightness(.5)- 给图片应用一种线性乘法,使其看起来更亮或更暗。

5、filter:saturate(6)- 转换图像饱和度。

6、filter:sepia(1)- 将图像转换为深褐色。

7、filter:hue-rotate(45deg)- 给图像应用色相旋转。

当取上面这些值时,我们来看一下具体效果:

2.gif

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css滤镜怎么用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏