CSS教程

css进阶八（滤镜）

本文主要是介绍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) 举例

一、滤镜是什么

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

二、滤镜的实现

通过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进阶八（滤镜）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航