html图片如何滤镜,学会使用CSS3滤镜，必需先知道的滤镜的常规用法

说到滤镜，搞前端的应该都不陌生，因为不管是曾经还是现在，你都有可能用过或者在用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个滤镜的用法，其实滤镜的用处不仅限制在单独去使用它们，更重要的是知道如何组合这些属性去处理你想要的效果。

html图片如何滤镜,学会使用CSS3滤镜，必需先知道的滤镜的常规用法相关推荐

unity黑白滤镜_Unity图片处理类，包括压缩、截屏和滤镜
http://www.cnblogs.com/EndOfYear/p/4334952.html 先上代码: using System.Threading; using UnityEngine; usi ...
CameraBag Pro 2021.0 图片特效编辑器，一款优秀实用的照片滤镜工具
CameraBag Pro是一款优秀实用的照片滤镜工具,提供海量的图片特效编辑功能,支持96位模拟引擎,让用户轻松进行曝光.色调.对比度的调整,支持所有主要的RAW图像格式. 可调滤镜预设和模拟引擎C ...
android拍照滤镜代码,Android OpenGLES如何给相机添加滤镜详解
滤镜介绍目前市面上的滤镜有很多,但整体归类也就几样,都是在fragment shader中进行处理.目前滤镜最常用的就是 lut滤镜以及调整RGB曲线的滤镜了.其他的类型变更大同小异. 动态滤镜的构 ...
css3动画图片旋转绕轴,css3图片旋转如何实现？css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
ps一键滤镜网红文艺小清新VSCO全滤镜插件安装教程
vsco是是众所周知超好用的手机滤镜,这里小编为大家带来了电脑版的ps一键滤镜网红文艺小清新VSCO全滤镜插件,vsco全套滤镜共182款,直接色彩查找,不借助ps动作,在ps上完美模拟vsco色彩, ...
css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
CSS3 列表、表格、滤镜
CSS3 列表.表格.鼠标.滤镜列表属性表格属性滤镜属性列表属性 list-style-type:标志类型:设置列表项标志的类型 list-style-position:outside:设置列 ...
HTML5+CSS3小实例：自定义滤镜实现液体加载动画
HTML5+CSS3搭配自定义滤镜做一个液体环形小球加载动画,七个小球绕环形旋转,设置有规律的动画延迟时间,使它们有序依次旋转,过程伴随溶球效果,这真是一个百看不腻的loading加载动画. 效果: ...
趁着同事下午茶的时间，我们都学会了怎么批量给视频加滤镜
剪辑制作视频时,如果用户想要实现视频与某张特定图片一样的滤镜风格,怎么提取呢? 华为视频编辑服务(Video Editor Kit)全新上线"专属滤镜"功能,集成后即可使应用拥有复 ...

html图片如何滤镜,学会使用CSS3滤镜，必需先知道的滤镜的常规用法

html图片如何滤镜,学会使用CSS3滤镜，必需先知道的滤镜的常规用法相关推荐

最新文章

热门文章