pin_drop当前位置:知识文库 ❯ 图文
CSS滤镜：filter属性与视觉效果 - 详细教程与指南
一、教程简介
CSS filter 属性用于对元素应用图形滤镜效果，如模糊、亮度、对比度、灰度、色相旋转等。滤镜可以增强图像效果、创建视觉层次、实现图片编辑器功能，也是实现毛玻璃效果（backdrop-filter）的基础。本教程将详细讲解 filter 的各种滤镜函数、组合使用以及实战应用。
二、核心概念
filter语法
代码示例
/* 单个滤镜 */
filter: blur(5px);
filter: brightness(1.2);
filter: contrast(1.5);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(0.5);
filter: saturate(2);
filter: sepia(100%);
filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
/* 多个滤镜组合 */
filter: brightness(1.1) contrast(1.2) saturate(1.3);
/* 无滤镜 */
filter: none;滤镜函数详解
代码示例
/* blur() - 高斯模糊 */
filter: blur(0); /* 无模糊 */
filter: blur(2px); /* 轻微模糊 */
filter: blur(10px); /* 强模糊 */
/* brightness() - 亮度 */
filter: brightness(0); /* 全黑 */
filter: brightness(0.5); /* 变暗50% */
filter: brightness(1); /* 原始亮度 */
filter: brightness(1.5); /* 变亮50% */
/* contrast() - 对比度 */
filter: contrast(0.5); /* 低对比度 */
filter: contrast(1); /* 原始对比度 */
filter: contrast(2); /* 高对比度 */
/* grayscale() - 灰度 */
filter: grayscale(0); /* 彩色 */
filter: grayscale(50%); /* 半灰度 */
filter: grayscale(100%); /* 完全灰度 */
/* hue-rotate() - 色相旋转 */
filter: hue-rotate(0deg); /* 原始色相 */
filter: hue-rotate(90deg); /* 旋转90度 */
filter: hue-rotate(180deg); /* 旋转180度 */
filter: hue-rotate(360deg); /* 旋转360度（回到原色） */
/* invert() - 反色 */
filter: invert(0); /* 原始 */
filter: invert(50%); /* 半反色 */
filter: invert(100%); /* 完全反色 */
/* opacity() - 透明度 */
filter: opacity(0); /* 完全透明 */
filter: opacity(0.5); /* 半透明 */
filter: opacity(1); /* 完全不透明 */
/* saturate() - 饱和度 */
filter: saturate(0); /* 无饱和度（灰度） */
filter: saturate(1); /* 原始饱和度 */
filter: saturate(2); /* 双倍饱和度 */
/* sepia() - 褐色调 */
filter: sepia(0); /* 原始 */
filter: sepia(50%); /* 半褐色 */
filter: sepia(100%); /* 完全褐色 */
/* drop-shadow() - 投影阴影 */
filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
filter: drop-shadow(0 0 10px rgba(255,0,0,0.5)); /* 发光效果 */backdrop-filter（背景滤镜）
代码示例
/* 毛玻璃效果 */
.glass {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari前缀 */
background: rgba(255, 255, 255, 0.2);
}
/* 组合背景滤镜 */
.glass-advanced {
backdrop-filter: blur(12px) saturate(180%);
background: rgba(255, 255, 255, 0.15);
}filter与box-shadow的区别
代码示例
/* box-shadow - 矩形阴影 */
box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
/* drop-shadow - 跟随形状的阴影 */
filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
/* drop-shadow会跟随元素的实际轮廓（包括透明区域） */
/* box-shadow只跟随元素的矩形边界 */三、代码示例
示例1：滤镜函数展示
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滤镜函数展示</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Microsoft YaHei', sans-serif; background: #f5f5f5; color: #333; padding: 20px; }
h1 { text-align: center; color: #2c3e50; margin-bottom: 25px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px; max-width: 1000px; margin: 0 auto; }
.filter-card { background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-align: center; }
.filter-card .preview { width: 100%; height: 100px; background: linear-gradient(135deg, #667eea, #764ba2, #f093fb); border-radius: 8px; margin-bottom: 10px; }
.filter-card h3 { font-size: 13px; margin-bottom: 3px; }
.f-blur .preview { filter: blur(3px); }
.f-brightness .preview { filter: brightness(1.4); }
.f-contrast .preview { filter: contrast(1.5); }
.f-grayscale .preview { filter: grayscale(100%); }
.f-hue .preview { filter: hue-rotate(90deg); }
.f-invert .preview { filter: invert(100%); }
.f-saturate .preview { filter: saturate(2); }
.f-sepia .preview { filter: sepia(100%); }
.f-shadow .preview { filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.5)); }
.f-combo .preview { filter: brightness(1.1) contrast(1.2) saturate(1.3); }
</style>
</head>
<body>
<h1>CSS 滤镜函数</h1>
<div class="filter-grid">
<div class="filter-card"><div class="preview"></div><h3>原始</h3></div>
<div class="filter-card f-blur"><div class="preview"></div><h3>模糊</h3></div>
<div class="filter-card f-brightness"><div class="preview"></div><h3>亮度</h3></div>
<div class="filter-card f-grayscale"><div class="preview"></div><h3>灰度</h3></div>
<div class="filter-card f-hue"><div class="preview"></div><h3>色相旋转</h3></div>
<div class="filter-card f-shadow"><div class="preview"></div><h3>投影</h3></div>
</div>
</body>
</html>示例2：毛玻璃效果与图片滤镜
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>毛玻璃效果与图片滤镜</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Microsoft YaHei', sans-serif; background: #f5f5f5; padding: 20px; }
.container { max-width: 900px; margin: 0 auto; }
/* 毛玻璃效果 */
.glass-section { position: relative; height: 350px; border-radius: 16px; overflow: hidden; margin-bottom: 25px; }
.glass-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c); background-size: 300% 300%; animation: gradientMove 8s ease infinite; }
@keyframes gradientMove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.glass-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.25); border-radius: 16px; padding: 30px; text-align: center; color: white; }
.glass-btn { padding: 10px 24px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 8px; cursor: pointer; }
.glass-btn:hover { background: rgba(255,255,255,0.35); }
/* 图片滤镜编辑器 */
.editor { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.editor-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
.editor-preview .img { width: 200px; height: 150px; background: linear-gradient(135deg, #667eea, #764ba2, #f093fb); border-radius: 10px; transition: filter 0.3s; }
.preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
.preset-btn { padding: 6px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 12px; cursor: pointer; background: white; }
@media (max-width: 768px) { .editor-layout { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="container">
<h1>毛玻璃效果与图片滤镜</h1>
<div class="glass-section">
<div class="glass-bg"></div>
<div class="glass-card">
<h2>毛玻璃效果</h2>
<p>backdrop-filter: blur(12px)</p>
<button class="glass-btn">了解更多</button>
</div>
</div>
<div class="editor">
<h2>图片滤镜编辑器</h2>
<div class="editor-layout">
<div class="editor-preview"><div class="img" id="filterImg"></div></div>
<div class="editor-controls">
<div class="preset-row">
<button class="preset-btn" onclick="applyPreset('none')">原始</button>
<button class="preset-btn" onclick="applyPreset('vintage')">复古</button>
<button class="preset-btn" onclick="applyPreset('bw')">黑白</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>示例3：滤镜实战应用
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滤镜实战应用</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Microsoft YaHei', sans-serif; background: #f0f2f5; color: #333; padding: 20px; }
.container { max-width: 1000px; margin: 0 auto; }
.section { background: white; padding: 25px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.section h2 { font-size: 18px; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #ecf0f1; }
/* 图片悬停效果 */
.img-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.img-hover { border-radius: 10px; overflow: hidden; cursor: pointer; position: relative; }
.img-hover .img { height: 160px; background-size: cover; background-position: center; transition: filter 0.4s ease; }
.img-hover .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transition: opacity 0.4s; }
.img-hover:hover .overlay { opacity: 1; }
.h-grayscale .img { filter: grayscale(100%); }
.h-grayscale:hover .img { filter: grayscale(0); }
.h-blur .img { filter: blur(3px); }
.h-blur:hover .img { filter: blur(0); }
.h-bright .img { filter: brightness(0.6); }
.h-bright:hover .img { filter: brightness(1.1); }
/* 发光效果 */
.glow-row { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.glow-item { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; transition: filter 0.3s; cursor: pointer; color: white; }
.glow-item:hover { filter: drop-shadow(0 0 12px currentColor); }
.g1 { background: #3498db; } .g2 { background: #27ae60; } .g3 { background: #e74c3c; } .g4 { background: #9b59b6; }
/* 禁用状态 */
.state-row { display: flex; gap: 15px; flex-wrap: wrap; }
.state-card { width: 150px; padding: 15px; border-radius: 10px; text-align: center; border: 1px solid #eee; transition: filter 0.3s; }
.state-disabled { filter: grayscale(100%) opacity(0.5); pointer-events: none; }
</style>
</head>
<body>
<div class="container">
<h1>滤镜实战应用</h1>
<div class="section">
<h2>图片悬停效果</h2>
<div class="img-grid">
<div class="img-hover h-grayscale"><div class="img" style="background-image: linear-gradient(135deg, #667eea, #764ba2);"></div><div class="overlay">灰度 → 彩色</div></div>
<div class="img-hover h-blur"><div class="img" style="background-image: linear-gradient(135deg, #f093fb, #f5576c);"></div><div class="overlay">模糊 → 清晰</div></div>
<div class="img-hover h-bright"><div class="img" style="background-image: linear-gradient(135deg, #4facfe, #00f2fe);"></div><div class="overlay">暗 → 亮</div></div>
</div>
</div>
<div class="section">
<h2>发光效果（drop-shadow）</h2>
<div class="glow-row">
<div class="glow-item g1">A</div>
<div class="glow-item g2">B</div>
<div class="glow-item g3">C</div>
<div class="glow-item g4">D</div>
</div>
</div>
<div class="section">
<h2>禁用状态（灰度+透明度）</h2>
<div class="state-row">
<div class="state-card"><h3>正常状态</h3><p>可交互</p></div>
<div class="state-card state-disabled"><h3>禁用状态</h3><p>不可交互</p></div>
<div class="state-card"><h3>正常状态</h3><p>可交互</p></div>
</div>
</div>
</div>
</body>
</html>四、浏览器兼容性
五、注意事项与最佳实践
注意事项
-
性能影响：
blur()滤镜性能开销较大，避免在大面积元素上使用高斯模糊 -
滤镜顺序：多个滤镜按书写顺序依次应用，顺序不同结果不同
-
backdrop-filter兼容性：Safari需要
-webkit-前缀 -
filter与opacity：
filter: opacity(0.5)与opacity: 0.5效果类似，但 filter 不影响布局 -
drop-shadow vs box-shadow：
drop-shadow跟随元素轮廓，box-shadow只跟随矩形边界
最佳实践
-
过渡滤镜：使用
transition: filter 0.3s实现滤镜过渡动画 -
毛玻璃：
backdrop-filter: blur()+ 半透明背景实现毛玻璃效果 -
图片悬停：
grayscale(100%)→grayscale(0)实现图片着色效果 -
禁用状态：
grayscale(100%) opacity(0.5)表示禁用状态 -
组合滤镜：
brightness() contrast() saturate()组合调整图片效果
六、代码规范示例
不推荐的写法
代码示例
/* 不推荐：大面积高斯模糊 */
.page { filter: blur(10px); } /* 严重影响性能 */
/* 不推荐：过多滤镜组合 */
.box { filter: blur(2px) brightness(1.2) contrast(1.5) saturate(2) hue-rotate(30deg) sepia(20%); }
/* 不推荐：忘记前缀 */
.glass { backdrop-filter: blur(10px); } /* Safari不支持 */推荐的写法
代码示例
/* 推荐：小面积模糊 */
.tooltip { filter: blur(2px); }
/* 推荐：适度滤镜组合 */
.photo { filter: brightness(1.05) contrast(1.1); }
/* 推荐：添加前缀 */
.glass {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}七、常见问题与解决方案
常见问题
backdrop-filter不生效怎么办？
原因是缺少 -webkit- 前缀，或元素背景不透明。添加 -webkit-backdrop-filter 前缀，确保元素背景半透明。
滤镜导致文字模糊怎么解决？
原因是 blur() 滤镜会影响元素内所有内容包括文字。将滤镜应用在伪元素或单独的背景层上，文字放在滤镜元素之外。
filter性能问题如何处理？
原因是大面积 blur() 滤镜消耗大量GPU资源。限制模糊面积，使用 will-change: filter 提示浏览器优化，或使用静态图片替代。
八、总结
CSS filter 提供了丰富的图形滤镜效果，包括 blur（模糊）、brightness（亮度）、contrast（对比度）、grayscale（灰度）、hue-rotate（色相旋转）、invert（反色）、opacity（透明度）、saturate（饱和度）、sepia（褐色调）、drop-shadow（投影）十大函数。backdrop-filter 用于实现毛玻璃效果。在实际开发中，应注意滤镜性能，适度组合使用，为 backdrop-filter 添加前缀。核心原则是：适度使用、注意性能、组合优化、添加前缀。
标签：
CSS滤镜
filter
毛玻璃
backdrop-filter
本文涉及AI创作
内容由AI创作，请仔细甄别list快速访问
poll相关推荐
