css进阶八（滤镜）

最新推荐文章于 2024-07-07 08:53:09 发布

二十一块石头

最新推荐文章于 2024-07-07 08:53:09 发布

阅读量631

点赞数 1

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_44872688/article/details/120962225

版权

本文介绍了CSS3中九种常用的滤镜效果，包括模糊、亮度、对比度、阴影、灰度、反转、不透明度、棕褐色和饱和度，并通过实例展示了它们的基本格式和效果。了解这些滤镜，可以提升网页元素的视觉表现。

摘要由CSDN通过智能技术生成

文章目录

一、滤镜是什么
二、滤镜的实现
三、常用的滤镜函数

一、滤镜是什么

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

二、滤镜的实现

通过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>