0Pricing
CSS Academy · 课时

filter：blur、brightness、contrast、grayscale

使用 CSS filter 属性函数为元素应用照片级滤镜效果。

filter：blur、brightness、contrast、grayscale 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

CSS 的 filter 属性

filter 属性可以为元素应用图形效果，类似于 Photoshop 中的调整图层，同时不会修改实际图像。

filter: blur()

应用高斯模糊。参数表示模糊半径。

<div class="frosted"></div>
<div class="hero-bg"></div>

filter: brightness()

调整亮度。1 = 原始亮度，0 = 黑色，2 = 亮度加倍。

<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />

filter: contrast()

调整对比度。1 = 原始对比度，0 = 平坦灰色，大于 1 的值会提高对比度。

<div class="high-contrast"></div>
<div class="low-contrast"></div>

filter: grayscale()

转换为灰度。0 = 全彩色，1（或 100%）= 完全灰度。

<div class="grayscale"></div>
<div class="portfolio-item"></div>

filter: saturate()

调整色彩饱和度。0 = 灰色，1 = 原始饱和度，大于 1 = 色彩鲜艳。

<div class="vivid"></div>
<div class="muted"></div>

filter: hue-rotate()

按指定角度旋转色相环——让所有颜色沿色轮发生偏移。

<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>

filter: sepia()

应用温暖的复古棕褐色调。0 = 原始效果，1 = 完全棕褐色。

<div class="vintage"></div>

filter: drop-shadow()

类似于 box-shadow，但会沿着元素实际渲染出的形状投射阴影（包括透明区域）。非常适合不规则的 PNG 图像。

<div class="icon">&#9733;</div>

组合多个滤镜

用空格分隔多个滤镜函数，将它们串联起来。滤镜会按照从左到右的顺序应用：

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>

filter 会创建堆叠上下文

对元素应用 filter 会创建新的堆叠上下文。这可能导致子元素的 position: fixed 表现得像 position: absolute，这是一个常见错误。

快速检查

哪个 CSS 滤镜函数会对元素应用高斯模糊？

总结

filter 属性可以应用各种照片调整效果：blur()、brightness()、contrast()、grayscale()、saturate()、hue-rotate()、sepia() 和 drop-shadow()。使用空格串联多个函数。请记住，filter 会创建堆叠上下文，这可能会影响固定定位的子元素。

常见问题解答

「filter：blur、brightness、contrast、grayscale」课时是免费的吗？

是的 — 「filter：blur、brightness、contrast、grayscale」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「filter：blur、brightness、contrast、grayscale」这节课中我会学到什么？

使用 CSS filter 属性函数为元素应用照片级滤镜效果。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「filter：blur、brightness、contrast、grayscale」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. filter：blur、brightness、contrast、grayscale
  2. 使用 backdrop-filter 创建磨砂玻璃效果
  3. 使用 mix-blend-mode 进行图层混合
  4. isolation 属性
← 返回 CSS Academy