Filter - 样式滤镜

约 882 字大约 3 分钟

2024-05-09

CSS滤镜（filter）是一种用于对元素应用视觉效果的样式属性。通过使用滤镜，可以实现模糊、亮度、对比度、灰度等多种效果。滤镜可以应用于图像、文本和其他元素，增强网页的视觉效果。

基本语法

  filter: <filter-function> [<filter-function> ...];

常用滤镜

blur：模糊滤镜，用于模糊图像。
brightness：亮度滤镜，用于调整图像的亮度。
contrast：对比度滤镜，用于调整图像的对比度。
drop-shadow：阴影滤镜，用于为元素添加阴影效果。
grayscale：灰度滤镜，用于将图像转换为灰度。
invert：反色滤镜，用于将图像反转为其相反的颜色。
opacity：透明度滤镜，用于调整图像的透明度。
saturate：饱和度滤镜，用于调整图像的饱和度。
sepia：褐色滤镜，用于将图像转换为褐色。

具体滤镜

`blur()`

blur()：模糊滤镜，用于模糊图像。

filter: blur(5px);

::: normal-demo filter 代码演示

 <h1>filter - blur</h1>
    <img class="image" src="https://via.placeholder.com/300" alt="示例图像" />

*{
  text-align: center;
}
.image {
    width: 300px;
    height: auto;
    transition: filter 0.3s;
}

.image:hover {
    filter: blur(5px)
}

:::

`brightness()`

brightness()：亮度滤镜，用于调整图像的亮度。

filter: brightness(120%)

::: normal-demo filter 代码演示

 <h1>filter - brightness</h1>
 <img class="image" src="https://via.placeholder.com/300" alt="示例图像" />

*{
  text-align: center;
}
.image {
    width: 300px;
    height: auto;
    transition: filter 0.3s;
}

.image:hover {
    filter: brightness(120%); /* 亮度增加20% */
}

:::

`contrast()`

contrast()：对比度滤镜，用于调整图像的对比度。

filter: contrast(200%); /* 对比度增加100% */

::: normal-demo filter 代码演示

 <h1>filter - contrast</h1>
 <img class="image" src="https://via.placeholder.com/300" alt="示例图像" />

*{
  text-align: center;
}
.image {
    width: 300px;
    height: auto;
    transition: filter 0.3s;
}

.image:hover {
   filter: contrast(200%)
}

:::

`drop-shadow()`

drop-shadow()：阴影滤镜，用于为元素添加阴影效果。

filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));

::: normal-demo filter 代码演示

 <h1>filter - drop-shadow</h1>
 <img class="image" src="https://via.placeholder.com/300" alt="示例图像" />

*{
  text-align: center;
}
.image {
    display: inline-block;
    width: 300px;
    height: auto;
    transition: filter 0.3s;
}

.image:hover {
   filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}

:::

`grayscale()`

grayscale()：灰度滤镜，用于将图像转换为灰度。

filter: grayscale(100%)

::: normal-demo filter 代码演示

 <h1>filter - grayscale</h1>
 <img class="image"  alt="示例图像" />

*{
  text-align: center;
}
.image {
    display: inline-block;
    width: 300px;
    height:300px;
    background: pink;
    transition: filter 0.3s;
}

.image:hover {
   filter: grayscale(100%); /* 完全灰度 */
}

:::

invert()

invert()：反色滤镜，用于将图像反转为相反的颜色。

filter: invert(100%)

::: normal-demo filter 代码演示

 <h1>filter - invert</h1>
 <img class="image"  alt="示例图像" />

*{
  text-align: center;
}
.image {
    display: inline-block;
    width: 300px;
    height:300px;
    background: pink;
    transition: filter 0.3s;
}

.image:hover {
   filter: invert(100%)
}

:::

opacity()

opacity()：透明度滤镜，用于调整图像的透明度。

filter: opacity(50%)

::: normal-demo filter 代码演示

 <h1>filter - opacity</h1>
 <img class="image"  alt="示例图像" />

*{
  text-align: center;
}
.image {
    display: inline-block;
    width: 300px;
    height:300px;
    background: pink;
    transition: filter 0.3s;
}

.image:hover {
  filter: opacity(50%)
}

:::

saturate()

saturate()：饱和度滤镜，用于调整图像的饱和度。

  filter: saturate(200%); /* 饱和度增加100% */

::: normal-demo filter 代码演示

 <h1>filter - saturate</h1>
 <img class="image"  alt="示例图像" />

*{
  text-align: center;
}
.image {
    display: inline-block;
    width: 300px;
    height:300px;
    background: pink;
    transition: filter 0.3s;
}

.image:hover {
  filter: saturate(200%); /* 饱和度增加100% */
}

:::

sepia()

sepia()：深褐色滤镜，用于将图像转换为深褐色。

filter: sepia(100%); /* 完全棕褐色 */

::: normal-demo filter 代码演示

 <h1>filter - sepia</h1>
 <img class="image"  alt="示例图像" />

*{
  text-align: center;
}
.image {
    display: inline-block;
    width: 300px;
    height:300px;
    background: pink;
    transition: filter 0.3s;
}

.image:hover {
 filter: sepia(100%); /* 完全棕褐色 */
}

:::