池州网站公司欢迎您
技术教程首页 > 技术教程

CSS3滤镜的常规用法

作者
池州网站公司
发布时间
2018-05-23

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

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

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

一、常用的

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

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

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

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

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

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

这样就一目了然了。

二、必需知道的

除了上面说的三种之外,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)- 给图像应用色相旋转。

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

总结一下:

写了10个滤镜的用法,其实滤镜的用处不仅限制在单独去使用它们,更重要的是知道如何组合这些属性去处理你想要的效果。关于一些技巧性的用法,下次来写。

栏目最新

全站导航

资料检索


服务支持

合作流程

网站制作流程从提出需求到网站制作报价,再到网页制作,每一步都是规范和专业的。

常见问题

提供什么是网站定制?你们的报价如何?等网站建设常见问题。

售后保障

网站制作不难,难的是一如既往的热情服务及技术支持。我们知道:做网站就是做服务,就是做售后。

拉丁传说

好的网站制作公司会给客户提出建设性的意见,善于对客户进行良性引导,避免客户走入误区,甚至帮助客户整理文案做好内容规划,会帮助客户构造互联网的升级计划...

联系我们

池州网页设计联系方式:
技术联系人:方先生
在线QQ:75054921
微信:13665664868
手机:13665664868

支付宝

支付宝付款码

Copyright © 2012-2018 池州拉丁传说网页设计工坊 版权所有