CSS 数据类型 <filter-function>表示图形效果，该效果会更改输入图像的外观。此数据类型用于 CSS 的 filter 和 backgrounddrop-filter 属性。
可能的值
数据类型 <filter-function> 是使用以下过滤器函数之一定义的，其中每个函数都需要传递一个参数。如果参数无效，则不会应用任何过滤器。
- blur（）：图像模糊。
- brightness（）：图像变亮或变暗。
- contrast（）：图像的对比度增加或减少。
- drop-shadow（）：在图像后面应用投影。
- grayscale（）：转换为灰度的图像。
- hue-rotate（）：改变图像的色相。
- invert（）：图像的颜色倒置。
- opacity（）：图像透明。
- saturate（）：输入图像是过饱和或不饱和的。
- sepia（）：图像转换为棕褐色。
语法
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>
CSS <filter-function> - 模糊图像
以下示例演示了如何使用 blur（） 滤镜函数对图像进行模糊处理：
<html>
<head>
<style>
.blur-image {
filter: blur(8px);
}
.box {
background: url(images/orange-flower.jpg) no-repeat center;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2><filter-function> - blur()</h2>
<p>No blur</p>
<div class="box"></div>
<p>Blurred</p>
<div class="box blur-image"></div>
</body>
</html>
CSS <filter-function> - 使图像变亮
以下示例演示了如何使用 brightness（） 滤镜函数来增加或减少图像的亮度：
<html>
<head>
<style>
.bright-image-inc{
filter: brightness(180%);
}
.bright-image-dec {
filter: brightness(50%);
}
.box {
background: url(images/orange-flower.jpg) no-repeat center;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2><filter-function> - brightness()</h2>
<p>Normal</p>
<div class="box"></div>
<p>Brightness Increased</p>
<div class="box bright-image-inc"></div>
<p>Brightness Decreased</p>
<div class="box bright-image-dec"></div>
</body>
</html>
CSS <filter-function> - 更改图像的对比度
以下示例演示了如何使用 contrast（） 滤镜函数来更改图像的对比度：
<html>
<head>
<style>
.contrast-image-inc{
filter: contrast(250%);
}
.contrast-image-dec {
filter: contrast(25%);
}
.box {
background: url(images/red-flower.jpg) no-repeat center;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2><filter-function> - contrast()</h2>
<p>Normal</p>
<div class="box"></div>
<p>Contrast Increased</p>
<div class="box contrast-image-inc"></div>
<p>Contrast Decreased</p>
<div class="box contrast-image-dec"></div>
</body>
</html>
有关过滤器功能的更多示例，请参阅过滤器页面。
