l-1

WEB教程

主页/CSS教程/CSS高级特性/CSS滤镜filter

CSS教程

CSS滤镜filter

CSS滤镜filter详解：模糊,亮度,对比度调整

1. CSS filter属性概述

CSS filter属性提供了将类似Photoshop的滤镜效果应用于网页元素（主要是图像）的能力。通过使用filter属性，可以直接在浏览器中实现模糊、亮度调整、对比度调整、灰度转换等多种视觉效果，无需借助图像编辑软件。

filter属性不会改变原始图像的尺寸和比例，可以应用于所有元素，在SVG中，它适用于除<defs>元素外的容器元素和所有图形元素。此属性不是继承属性，其计算值为指定值，动画类型为滤镜函数列表。

1.1 浏览器兼容性

大多数现代浏览器都支持filter属性，包括Chrome、Firefox、Safari以及它们的移动版本。在使用时，可能需要添加供应商前缀（如-webkit-）以确保跨浏览器兼容性。Internet Explorer不支持filter属性。

2. 滤镜函数详解

2.1 模糊（blur）

blur()函数给图像设置高斯模糊效果。模糊半径越大，图像越模糊。

语法： filter: blur(radius)

  • radius：设置高斯函数的标准差，即屏幕上多少像素融在一起
  • 单位：像素
  • 默认值：0（不模糊）
<!DOCTYPE html>
<html>
<head>
<style>
.blur-image {
  filter: blur(5px);
  -webkit-filter: blur(5px); /* 兼容 Chrome, Safari, Opera */
}
</style>
</head>
<body>
  <img src="image.jpg" alt="示例图片" class="blur-image">
</body>
</html>

2.2 亮度（brightness）

brightness()函数调整图像的亮度。

语法： filter: brightness(percentage)

  • percentage：
  • 值为0%时图像全黑
  • 值为100%时图像无变化
  • 值超过100%时图像更亮
  • 默认值：1（100%）
<!DOCTYPE html>
<html>
<head>
<style>
.brightness-example {
  filter: brightness(150%);
  -webkit-filter: brightness(150%);
}
.darkness-example {
  filter: brightness(50%);
  -webkit-filter: brightness(50%);
}
</style>
</head>
<body>
  <img src="image.jpg" alt="变亮图片" class="brightness-example">
  <img src="image.jpg" alt="变暗图片" class="darkness-example">
</body>
</html>

2.3 对比度（contrast）

contrast()函数调整图像的对比度。

语法： filter: contrast(percentage)

  • percentage：
  • 值为0%时图像全黑
  • 值为100%时图像无变化
  • 值超过100%时增强对比度
  • 默认值：1（100%）
<!DOCTYPE html>
<html>
<head>
<style>
.contrast-image {
  filter: contrast(200%);
  -webkit-filter: contrast(200%);
}
</style>
</head>
<body>
  <img src="image.jpg" alt="高对比度图片" class="contrast-image">
</body>
</html>

2.4 阴影（drop-shadow）

drop-shadow()函数沿图像的轮廓生成阴影效果。

语法： filter: drop-shadow(h-shadow v-shadow blur spread color)

  • h-shadow：水平阴影位置（必需）
  • v-shadow：垂直阴影位置（必需）
  • blur：模糊距离（可选）
  • spread：阴影大小（可选，部分浏览器不支持）
  • color：阴影颜色（可选）
<!DOCTYPE html>
<html>
<head>
<style>
.shadow-image {
  filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
  -webkit-filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}
</style>
</head>
<body>
  <img src="image.jpg" alt="带阴影图片" class="shadow-image">
</body>
</html>

2.5 灰度（grayscale）

grayscale()函数将图像转换为灰度图像。

语法： filter: grayscale(percentage)

  • percentage：
  • 值为0%时图像无变化
  • 值为100%时完全转为灰度图像
  • 默认值：0
<!DOCTYPE html>
<html>
<head>
<style>
.grayscale-image {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
  <img src="image.jpg" alt="灰度图片" class="grayscale-image">
</body>
</html>

2.6 色相旋转（hue-rotate）

hue-rotate()函数通过给图像应用色相旋转来改变其颜色。

语法： filter: hue-rotate(angle)

  • angle：图像会被调整的色环角度值
  • 值为0deg时图像无变化
  • 超过360deg的值相当于又绕一圈
  • 默认值：0deg
<!DOCTYPE html>
<html>
<head>
<style>
.hue-rotate-image {
  filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
}
</style>
</head>
<body>
  <img src="image.jpg" alt="色相旋转图片" class="hue-rotate-image">
</body>
</html>

2.7 反转（invert）

invert()函数将反转输入图像。

语法： filter: invert(percentage)

  • percentage：
  • 值为0%时图像无变化
  • 值为100%时完全反转
  • 默认值：0
<!DOCTYPE html>
<html>
<head>
<style>
.invert-image {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}
</style>
</head>
<body>
  <img src="image.jpg" alt="反色图片" class="invert-image">
</body>
</html>

2.8 透明度（opacity）

opacity()函数调整图像的透明程度。

语法： filter: opacity(percentage)

  • percentage：
  • 值为0%时完全透明
  • 值为100%时图像无变化
  • 默认值：1（100%）
<!DOCTYPE html>
<html>
<head>
<style>
.opacity-image {
  filter: opacity(50%);
  -webkit-filter: opacity(50%);
}
</style>
</head>
<body>
  <img src="image.jpg" alt="半透明图片" class="opacity-image">
</body>
</html>

2.9 饱和度（saturate）

saturate()函数调整图像饱和度。

语法： filter: saturate(percentage)

  • percentage：
  • 值为0%时完全不饱和
  • 值为100%时图像无变化
  • 超过100%时增加饱和度
  • 默认值：1（100%）
<!DOCTYPE html>
<html>
<head>
<style>
.saturate-image {
  filter: saturate(200%);
  -webkit-filter: saturate(200%);
}
</style>
</head>
<body>
  <img src="image.jpg" alt="高饱和度图片" class="saturate-image">
</body>
</html>

2.10 色阶（sepia）

sepia()函数将图像转换为深褐色。

语法： filter: sepia(percentage)

  • percentage：
  • 值为0%时图像无变化
  • 值为100%时完全转为深褐色
  • 默认值：0
<!DOCTYPE html>
<html>
<head>
<style>
.sepia-image {
  filter: sepia(100%);
  -webkit-filter: sepia(100%);
}
</style>
</head>
<body>
  <img src="image.jpg" alt="深褐色图片" class="sepia-image">
</body>
</html>

3. 复合滤镜应用

可以将多个滤镜效果组合在一起，创建更复杂的视觉效果。滤镜函数按照从左到右的顺序依次应用到元素上。

<!DOCTYPE html>
<html>
<head>
<style>
.complex-filter {
  filter: contrast(150%) brightness(120%) saturate(150%) hue-rotate(45deg);
  -webkit-filter: contrast(150%) brightness(120%) saturate(150%) hue-rotate(45deg);
}
</style>
</head>
<body>
  <img src="image.jpg" alt="复合滤镜效果" class="complex-filter">
</body>
</html>

4. 滤镜与动画

filter属性的值可以通过CSS动画和过渡进行插值。当动画处理时，如果起始和结束滤镜都有相同长度的函数列表，则会根据每个滤镜函数的特定规则进行插值。

<!DOCTYPE html>
<html>
<head>
<style>
.animated-filter {
  transition: filter 0.5s ease;
  -webkit-transition: -webkit-filter 0.5s ease;
}

.animated-filter:hover {
  filter: blur(3px) brightness(150%);
  -webkit-filter: blur(3px) brightness(150%);
}
</style>
</head>
<body>
  <img src="image.jpg" alt="动画滤镜效果" class="animated-filter">
</body>
</html>

5. 实用技巧与注意事项

5.1 解决模糊边缘问题

当对图像应用模糊效果时，边缘也会变得模糊。要解决这个问题，可以在图像外面包裹一个容器，并设置超出隐藏。

<!DOCTYPE html>
<html>
<head>
<style>
.blur-container {
  width: 500px;
  overflow: hidden;
}

.blur-inside {
  filter: blur(10px);
  -webkit-filter: blur(10px);
}
</style>
</head>
<body>
  <div class="blur-container">
    <img src="image.jpg" alt="无边缘模糊图片" class="blur-inside">
  </div>
</body>
</html>

5.2 filter属性的优缺点

优点缺点
可以实现多种图像效果，通过一行CSS代码即可实现可能会降低性能，特别是在应用复杂滤镜效果时
不需要在图片编辑软件中进行图像处理在一些旧版本的浏览器中不被支持
可以在动画中使用，实现动态效果一些滤镜效果可能会导致图像失真
不会改变原始图像的尺寸和比例滤镜效果只能应用于有alpha通道的元素

6. 综合示例

以下是一个完整的网页示例，展示多种滤镜效果的应用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS滤镜效果展示 - 找找网</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        .filter-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .filter-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            text-align: center;
        }

        .filter-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 4px;
        }

        .filter-name {
            margin-top: 10px;
            font-weight: bold;
            color: #555;
        }

        .original {
            filter: none;
        }

        .blur {
            filter: blur(3px);
        }

        .brightness {
            filter: brightness(150%);
        }

        .contrast {
            filter: contrast(200%);
        }

        .grayscale {
            filter: grayscale(100%);
        }

        .sepia {
            filter: sepia(100%);
        }

        .hue-rotate {
            filter: hue-rotate(90deg);
        }

        .invert {
            filter: invert(100%);
        }

        .saturate {
            filter: saturate(300%);
        }

        .multiple {
            filter: contrast(150%) brightness(120%) saturate(150%) hue-rotate(45deg);
        }

        /* 添加动画效果 */
        .animated-filter {
            transition: filter 0.3s ease;
        }

        .animated-filter:hover {
            filter: none;
        }
    </style>
</head>
<body>
    <h1>CSS滤镜效果展示</h1>

    <div class="filter-gallery">
        <div class="filter-item">
            <img src="image.jpg" alt="原始图片" class="original">
            <div class="filter-name">原始图片</div>
        </div>

        <div class="filter-item">
            <img src="image.jpg" alt="模糊效果" class="blur animated-filter">
            <div class="filter-name">模糊效果 (blur)</div>
        </div>

        <div class="filter-item">
            <img src="image.jpg" alt="亮度调整" class="brightness animated-filter">
            <div class="filter-name">亮度调整 (brightness)</div>
        </div>

        <div class="filter-item">
            <img src="image.jpg" alt="对比度调整" class="contrast animated-filter">
            <div class="filter-name">对比度调整 (contrast)</div>
        </div>

        <div class="filter-item">
            <img src="image.jpg" alt="灰度效果" class="grayscale animated-filter">
            <div class="filter-name">灰度效果 (grayscale)</div>
        </div>

        <div class="filter-item">
            <img src="image.jpg" alt="深褐色效果" class="sepia animated-filter">
            <div class="filter-name">深褐色效果 (sepia)</div>
        </div>

        <div class="filter-item">
            <img src="image.jpg" alt="色相旋转" class="hue-rotate animated-filter">
            <div class="filter-name">色相旋转 (hue-rotate)</div>
        </div>

        <div class="filter-item">
            <img src="image.jpg" alt="反色效果" class="invert animated-filter">
            <div class="filter-name">反色效果 (invert)</div>
        </div>

        <div class="filter-item">
            <img src="image.jpg" alt="饱和度调整" class="saturate animated-filter">
            <div class="filter-name">饱和度调整 (saturate)</div>
        </div>

        <div class="filter-item">
            <img src="image.jpg" alt="复合滤镜" class="multiple animated-filter">
            <div class="filter-name">复合滤镜效果</div>
        </div>
    </div>
</body>
</html>

7. 总结

CSS filter属性为网页开发人员提供了强大的图像处理能力，无需依赖外部图像编辑软件即可实现丰富的视觉效果。通过合理使用各种滤镜函数和组合，可以显著提升网页的视觉吸引力和用户体验。

本篇教程知识点总结

知识点知识内容
filter属性概述CSS filter属性可对网页元素应用多种视觉效果，无需图像编辑软件，不改变原始图像尺寸和比例
模糊效果blur()函数使用高斯模糊，半径值越大越模糊，单位是像素
亮度调整brightness()函数调整亮度，0%全黑，100%无变化，超过100%更亮
对比度调整contrast()函数调整对比度，0%全黑，100%无变化，超过100%增强对比度
阴影效果drop-shadow()函数沿图像轮廓生成阴影，需设置水平/垂直位置、模糊度和颜色
灰度转换grayscale()函数将图像转为灰度，0%无变化，100%完全灰度
色相旋转hue-rotate()函数改变图像颜色，通过色环角度值调整
颜色反转invert()函数反转图像颜色，0%无变化，100%完全反转
透明度调整opacity()函数调整透明度，0%完全透明，100%无变化
饱和度调整saturate()函数调整饱和度，0%完全不饱和，100%无变化，超过100%增加饱和度
深褐色效果sepia()函数将图像转为深褐色，营造复古效果
复合滤镜可组合多个滤镜函数，按从左到右顺序应用
动画与过渡filter属性支持CSS动画和过渡，可创建动态视觉效果
浏览器兼容性现代浏览器大多支持，需使用-webkit-前缀确保兼容性，IE不支持
实用技巧使用容器和overflow:hidden解决模糊边缘问题

, , ,