文章目录

一、滤镜是什么
二、滤镜的实现
三、常用的滤镜函数
- 1、模糊效果blur()
- - (1) 基本格式
  - (2) 举例
- 2、设置图像亮度：brightness()
- - (1) 基本格式
  - (2) 举例
- 3、图像对比度：contrast()
- - (1) 基本格式
  - (2) 举例
- 4、阴影效果：drop-shadow()
- - (1) 基本格式
  - (2) 举例
- 5、图像灰度转换：grayscale()
- - (1) 基本格式
  - (2) 举例
- 6、图像反转：invert()
- - (1) 基本格式
  - (2) 举例
- 7、图像不透明度：opacity()
- - (1) 基本格式
  - (2) 举例
- 8、图像转换为棕褐色：sepia()
- - (1) 基本格式
  - (2) 举例
- 9、图像饱和度：saturate()
- - (1) 基本格式
  - (2) 举例

一、滤镜是什么

对图形、图像进行的视觉处理(模糊、饱和度、对比度等)。

二、滤镜的实现

通过filter属性实现，该属性按提供的顺序接受一个或多个滤镜功能。

filter:blur();等

三、常用的滤镜函数

1、模糊效果blur()

像高斯模糊效果这样的Photoshop可以使用该blur（）功能应用于元素。此函数接受css长度值作为定义模糊半径的参数。较大的值将产生更多的模糊，如果未提供参数，则使用值0。

(1) 基本格式

filter: blur(number);

(2) 举例

模糊前图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#a1 {width: 400px;height: 400px;border-radius: 50%;}
</style>
<body><img src="./images/nick.png" id="a1">
</body>
</html>

模糊后图片，改动代码和效果图如下：

    #a1 {width: 400px;height: 400px;border-radius: 50%;filter: blur(3px);}

2、设置图像亮度：brightness()

括号里的值可以是实数也可以是百分比。值0%将创建全黑的图像，值100%或1使图像不变。number越大图像越亮,number不能取负值。还可以将亮度设置为高于100%，这样可以使图像更亮，如果未提供参数，则使用值1。

(1) 基本格式

filter: brightness(number);

(2) 举例

改变亮度前图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#a1 {width: 400px;height: 400px;border-radius: 50%;}
</style>
<body><img src="./images/nick.png" id="a1">
</body>
</html>

改变亮度后图片，改动代码和效果图如下：

    #a1 {width: 400px;height: 400px;border-radius: 50%;filter: brightness(0.4);}

注意：如果先设置模糊效果，再设置图像亮度的话，模糊效果将不会显示。

3、图像对比度：contrast()

括号里的值可以是实数也可以是百分比。值0%将创造全黑的图像，而值100%或1保持图像不变。还允许超过100%的值，从而提供对比度较低的结果。如果未提供参数，则使用值为1。
注：图像对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，即指一幅图像灰度反差的大小。差异范围越大代表对比越大，差异范围越小代表对比越小，好的对比率120:1就可容易地显示生动、丰富的色彩，当对比率高达300:1时，便可支持各阶的颜色。

(1) 基本格式

filter:contrast(number);

(2) 举例

改变对比度前图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#a1 {width: 400px;height: 400px;border-radius: 50%;}
</style>
<body><img src="./images/nick.png" id="a1">
</body>
</html>

改变对比度后图片，改动代码和效果图如下：

    #a1 {width: 400px;height: 400px;border-radius: 50%;filter:contrast(0);}

4、阴影效果：drop-shadow()

作用类似CSS中的box-shadow属性

(1) 基本格式

drop-shadow(args1 args2 args3 args4);

四个属性值的意思是：
args1：阴影的水平偏移量；
args2：阴影的垂直偏移量；
args3：阴影的模糊半径；
args4：阴影的颜色。
注：四个属性值中间加空格，不能出现逗号。

(2) 举例

添加阴影前图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#a1 {width: 400px;height: 400px;border-radius: 50%;}
</style>
<body><img src="./images/nick.png" id="a1">
</body>
</html>

添加阴影后图片，改动代码和效果图如下：

    #a1 {width: 400px;height: 400px;border-radius: 50%;filter:drop-shadow(5px 5px 300px orange);}

5、图像灰度转换：grayscale()

括号里的值可以是实数也可以是百分比。将图像转换为灰度，值100%完全是灰度，值0%保留图像不变。如果未提供参数，则使用值0。

(1) 基本格式

filter:grayscale();

(2) 举例

灰度转换前图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#a1 {width: 400px;height: 400px;border-radius: 50%;}
</style>
<body><img src="./images/nick.png" id="a1">
</body>
</html>

灰度转换后图片，改动代码和效果图如下：

    #a1 {width: 400px;height: 400px;border-radius: 50%;filter:grayscale(0.5);}

6、图像反转：invert()

括号里的值可以是0-1的值或百分比，100%或1的值被完全反转，值0%会使输入保持不变，0%到100%之间的值是效果的线性乘数。如果未提供参数，则使用值0，不允许使用负值。反转主要是为了设置一种胶片的效果。

(1) 基本格式

filter:invert();

(2) 举例

图像反转前图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#a1 {width: 400px;height: 400px;border-radius: 50%;}
</style>
<body><img src="./images/nick.png" id="a1">
</body>
</html>

图像反转后图片，改动代码和效果图如下：

    #a1 {width: 400px;height: 400px;border-radius: 50%;filter:invert(0.8);}

7、图像不透明度：opacity()

括号里的值可以是0-1的值或百分比，值0%是完全透明的，100%或1保持图像不变，如果未提供参数，则使用值1，此功能类似于opacity属性。

(1) 基本格式

filter:opacity();

(2) 举例

改变图像透明度前图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#a1 {width: 400px;height: 400px;border-radius: 50%;}
</style>
<body><img src="./images/nick.png" id="a1">
</body>
</html>

改变图像透明度后图片，改动代码和效果图如下：

    #a1 {width: 400px;height: 400px;border-radius: 50%;filter:opacity(0.3);}

8、图像转换为棕褐色：sepia()

括号里的值可以是0-1的值或百分比，将图像转换为棕褐色，值100%或1完全是深褐色，值0%保留图像不变，如果缺少参数，则使用值0。在摄影时，棕褐色是一种特殊的处理方法，可以使黑白照片具有较暖的色调（红棕色），以增强其存档质量。

(1) 基本格式

filter:sepia();

(2) 举例

图像转换为棕褐色前图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#a1 {width: 400px;height: 400px;border-radius: 50%;}
</style>
<body><img src="./images/nick.png" id="a1">
</body>
</html>

图像转换为棕褐色后图片，改动代码和效果图如下：

    #a1 {width: 400px;height: 400px;border-radius: 50%;filter:sepia(1);}

9、图像饱和度：saturate()

括号里的值可以是实数或百分比，可调整图像的饱和度，值0%完全不饱和，值100%保留图像不变，还允许值超过100%，从而提供超饱和结果，如果缺少参数，则使用值1。

(1) 基本格式

filter:saturate();

(2) 举例

改变图像饱和度前图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#a1 {width: 400px;height: 400px;border-radius: 50%;}
</style>
<body><img src="./images/nick.png" id="a1">
</body>
</html>

改变图像饱和度后图片，改动代码和效果图如下：

    #a1 {width: 400px;height: 400px;border-radius: 50%;filter:saturate(200%);}

css进阶八（滤镜）相关推荐

PhotoShop算法实现进阶-浮雕滤镜-八方向浮雕（三十）
PhotoShop算法实现进阶-浮雕滤镜-八方向浮雕(三十) kezunhai@gmail.com http://blog.csdn.net/kezunhai 八方向浮雕根据不同的雕刻方向,产生不同方 ...
PhotoShop算法实现进阶-浮雕滤镜-灰度浮雕（三十一）
PhotoShop算法实现进阶-浮雕滤镜-灰度浮雕(三十一) kezunhai@gmail.com http://blog.csdn.net/kezunhai 浮雕效果可谓花样百出,但他们主要是基于图 ...
CSS进阶（一）背景与边框
CSS进阶(一)背景与边框文章目录 CSS进阶(一)背景与边框一.浏览器前缀二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...
巧用CSS的Glow滤镜
作者:冯永曜对一个对象使用"glow"滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的"glow&qu ...
《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
(11/24) css进阶：Less文件的打包和分离
(11/24) css进阶:Less文件的打包和分离写在前面:在前面我们对css打包和分离进行了描述.此节我们开始学习如何对less文件进行打包和分离. Less 是一门 CSS 预处理语言,它扩展 ...
html美化计算机,职称计算机Dreamwaver教程：CSS样式表滤镜
职称计算机Dreamwaver教程:CSS样式表滤镜导语:CSS是Cascading Style Sheet 的缩写.译作「层叠样式表单」.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的 ...
前端开发注意事项(HTML与CSS进阶)
HTML 与 CSS 进阶 Img 标签 alt 属性一定要添加用于图片描述给机器看的,如果图片加载失败,会显示 alt <img src="" alt="& ...
React学习资料+css进阶资料总结
# Awesome ## 最佳实践 * [React + Redux 最佳实践](https://github.com/sorrycc/blog/issues/1) * [Redux 最佳实践-译]( ...

css进阶八（滤镜）

文章目录

一、滤镜是什么

二、滤镜的实现

三、常用的滤镜函数

1、模糊效果blur()

(1) 基本格式

(2) 举例

2、设置图像亮度：brightness()

(1) 基本格式

(2) 举例

3、图像对比度：contrast()

(1) 基本格式

(2) 举例

4、阴影效果：drop-shadow()

(1) 基本格式

(2) 举例

5、图像灰度转换：grayscale()

(1) 基本格式

(2) 举例

6、图像反转：invert()

(1) 基本格式

(2) 举例

7、图像不透明度：opacity()

(1) 基本格式

(2) 举例

8、图像转换为棕褐色：sepia()

(1) 基本格式

(2) 举例

9、图像饱和度：saturate()

(1) 基本格式

(2) 举例

css进阶八（滤镜）相关推荐

最新文章

热门文章