CSS 数据类型

CSS 数据类型 <filter-function> 表示图形效果，它会更改输入图像的外观。此数据类型用于filter和backdrop-filter CSS 属性。

可能的值

数据类型 <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(/css/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(/css/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(/css/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>

有关滤镜函数的更多示例，请参阅 filter 页。