CSS filter property看起来像一个造型快捷方式:一行将照片变成黑白,模糊背景或温暖缩略图,不涉及图像编辑器,就是。它还改变了浏览器如何定位和分层它所应用的元素,这就是为什么为悬停效果添加的过滤器可以悄悄地将下拉分成三个组件。
本指南涵盖了每个过滤器功能对像素值的作用、为什么相同的功能以不同的顺序产生不同的图像、过滤器在布局和动画中的行为方式以及它们的性价比。它使用免费 CSS滤波器生成器 要构建声明,但每个示例都是简单的 CSS,您可以粘贴到任何地方。
TL;博士: CSS
filterproperty 将模煳、亮度、对比度、灰度、棕褐色、饱和、反转、色调旋转和不透明度等图形效果应用到一个元素及其内部的所有内容中,按照函数编写的顺序,应用除其他任何值none还创建堆叠上下文并成为固定且绝对定位的儿童的包含块,这是 " 我的模式卡在卡中" 的常见原因。 Toolz CSS 过滤器生成器使用滑块和实时预览构建声明,仅编写您更改的功能,并运行客户端、免费、无注册。
什么是CSS过滤器属性？
CSS滤镜属性在元素被画在页面之前,将图像处理效果应用到元素上,效果涵盖了元素's整个渲染:它的背景、边框、文本、图像和子元素,它在W3C中定义 过滤器效果模块级别 1 并支持所有当前浏览器;的 MDN 参考过滤器 列出兼容性详细信息。
A 声明是一个空格分隔的过滤器函数列表:
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
Functions 从左到右,每一个都以前一个的输出为输入,是理解为什么顺序很重要。
Filters 不会修改镜像文件,浏览器每次画图时都会应用,所以原件保持不变,可以用一行 CSS 改变或移除效果。
每个过滤器功能都做什么?
每个函数都有一个恒等值,使元素保持不变。Toolz 生成器使用 that 来保持输出短:CSS 中省略了在其恒等值处留下的任何函数。
| 功能 | 它做什么 | 身份 | 生成器滑块范围 |
|---|---|---|---|
blur() |
给定半径的高斯模糊 | 0px |
0到20便士 |
brightness() |
乘以每个颜色通道 | 100% |
0到200% |
contrast() |
将通道推离或推向中灰色 | 100% |
0到200% |
saturate() |
增加或减少颜色强度 | 100% |
0到200% |
grayscale() |
混合成等亮度的灰色 | 0% |
0到100% |
sepia() |
混合成暖棕色调 | 0% |
0到100% |
invert() |
将每个通道翻转到其对面 | 0% |
0到100% |
hue-rotate() |
围绕色轮旋转颜色 | 0deg |
0到360deg |
opacity() |
使元素更加透明 | 100% |
0到100% |
该规范允许超出其中一些范围的值,例如 brightness(300%)。滑块覆盖了可用于照片式调整的范围;您可以用手将更大的值输入到 CSS 中。
规范还定义了 drop-shadow()(生成器不包含)的。不同 box-shadow、 drop-shadow() png图标等透明图像的可见形状,而不是元素's矩形框,对于矩形阴影,the 盒子阴影指南 涵盖更灵活的属性。
滤色器如何改变像素值?
大多数滤色器在红色、绿色和蓝色通道上都是简单的算术,每个通道都被视为从 0 到 1 的数字。滤色器效果规范将每个滤色器定义为公式或 3 x 3 矩阵。通过几种颜色,它们变得可预测。
亮度(150%) 1.5乘以每个通道。rgb(100,100,100)的中灰色变成rgb(150,150,150)。将超过255的值剪辑,这就是为什么高亮度将高光冲刷为纯白色。
相比之下(200%) (值-0.5)×2 + 0.5 应用到每个通道上,0.25(约64)处的深灰色变成(0.25 - 0.5)×2 + 0.5 = 0,黑色,0.75处的浅灰色变成1.0,白色,一切都从中间扩散开来。
灰度(100%) 1个像素替换成基于亮度的灰色,使用红色为0.2126,绿色为0.7152,蓝色为0.0722的权重,纯红色,rgb(255,0,0),变成0.2126 × 255 = 54左右,所以rgb(54,54,54),纯绿色变成浅得多的灰色,大约182,这就是为什么灰度转换保持了绿色比红色明亮的感觉。
棕褐色(100%) 混合具有温加权系数的通道。对于红色输出,公式为 0.393R + 0.769G + 0.189B。白色以 (1, 1, 1) 形式出现,大致以 (1.35, 1.20, 0.94) 形式出现,夹到 rgb(255, 255, 239):白色变成淡淡的奶油色。
这些数字来自于直接应用规范's公式。在屏幕上,四舍五入和颜色管理可以将结果移动一两个单位。
为什么过滤函数的顺序会改变结果?
Filters依次应用,所以每个函数都工作在前一个函数's输出上,当一个函数去掉信息,比如灰度去掉颜色,任何运行在其后面的东西都用得更少。
取纯蓝色,rgb(0,0,255),两个订单均按 100% 涂抹灰度和棕褐色。
filter: grayscale(100%) sepia(100%);
- 灰度第一:蓝色亮度为 0.0722,因此每个通道上的像素变成 0.0722 的深灰色,大约为 rgb(18、18、18)。
- Sepia 第二:红色变为 0.0722 × (0.393 + 0.769 + 0.189) = 0.0975,绿色变为 0.0722 × 1.203 = 0.0869,蓝色变为 0.0722 × 0.937 = 0.0677。
- 结果:关于 rgb(25、22、17)的,非常深的暖棕色。
filter: sepia(100%) grayscale(100%);
- 首先是棕褐色:红色变为0.189,绿色变为0.168,蓝色变为0.131,深棕色。
- 灰度秒:亮度为0.2126×0.189+0.7152×0.168+0.0722×0.131=0.170。
- 结果:关于 rgb(43, 43, 43)的,一点色调都没有的中性灰。
2个函数相同,顺序不同,一个结果调色而另一个不调色,一般规则:如果要后面的函数调色结果,先放去色函数,如果要中性的最终图像,最后放。
Generator总是以一个固定的顺序写入函数:模煳、亮度、对比度、饱和度、灰度、棕褐色、反转、色调旋转、不透明度,所以灰度总是先于棕褐色,这就给出了色调版本,如果需要不同的顺序,复制CSS,手工重新排列函数。
预设会产生什么?
Vintage 预设上生成器打开, 这些是每个预设写入的确切声明:
| 预设 | 生成 CSS |
|---|---|
| 没有 | filter: none; |
| 灰度 | filter: grayscale(100%); |
| 复古 | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| 温暖 | filter: brightness(105%) saturate(140%) sepia(25%); |
| 凉 | filter: saturate(120%) hue-rotate(200deg); |
| 戏剧性的 | filter: brightness(90%) contrast(150%) saturate(120%); |
| 褪色 | filter: brightness(110%) saturate(80%) opacity(80%); |
| 反转 | filter: invert(100%); |
| 模糊 | filter: blur(4px); |
Presets为起点,点击暖,然后拖动模煳到2px,输出变为 filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);。单击"无"或"重置",它将返回到 filter: none;。
Cool预设比它的名字所暗示的要强:200度的色调旋转将橙色移向蓝色,蓝色移向橙色,在温暖的照片上读作"cool",在其他一切上读作重色偏移。
Preview 是蓝色、橙色和绿色渐变的固定样本,有几种形状,不是上传,它展示了每个功能如何移动颜色、对比度和模糊度,但总是在真实图像上测试复制的 CSS,因为一个滤镜可以平坦一个渐变,在肤色上看起来很泥泞。
如何使用生成器构建过滤器?
- 打开 过滤器 CSS 生成器。它从复古开始。
- 选择最接近您想要的外观的预设,或单击"无"以从无过滤器开始。
- 拖动滑块。移动时预览更新,生成 CSS 行随之更新。
- 单击复制 CSS 以放置完整内容
filter: ...;在剪贴板上声明。 - 将其粘贴到图像或元素的选择器上,然后在真实页面中选中它。
输出中仅出现更改的函数,因此将亮度移回 100% 删除 brightness() 从线而不是离开 brightness(100%) 后面。
为什么过滤器会破坏固定且绝对定位的元件?
因为任何 filter 除外 none 使元素成为其绝对且固定的定位后代的包含块,并创建一个新的堆叠上下文。filter Effects 规范同时声明了这不是浏览器错误;这是属性定义的方式。
实际上,这会产生两个经典错误。
不固定的固定模态。 正常 position: fixed viewport 相对放置一个元素, 在一个经过过滤的祖先内部, 它被放置在相对于那个祖先的位置, 而不是:
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
隐藏在邻居下方的下拉。 过滤后的元素成为其自己的堆叠上下文,因此是一个孩子 z-index: 1000 can不再上升到卡外面的元素之上,它只在卡内面的顶部。
两者的修复都是一样的。将过滤器施加到较窄的元件上,例如 img card内部而不是card本身。或者在过滤的元素外部渲染模态或下拉,这就是ui框架中的"门户"组件所做的。的 transform 属性会导致相同的包含块行为,因此 CSS 变换指南 如果您遇到此错误且两个属性都在发挥作用,则非常有用。
滤波器如何与背景滤波器和不透明度进行比较?
有几个属性与过滤器功能重叠,选择正确的属性可以避免副作用。
| 财产 | 影响 | 典型用途 |
|---|---|---|
filter |
该元素及其内容 | 照片效果、灰度徽标、图像模糊 |
backdrop-filter |
元素背后有什么 | 磨砂玻璃板,覆盖层模糊 |
opacity |
该元素及其内容 | 将元素淡入或淡出 |
filter: opacity() |
该元素及其内容 | 作为过滤链一部分的透明度 |
mix-blend-mode |
元素如何与背后的元素融合 | 颜色叠加,双调效果 |
backdrop-filter 采用相同的功能 filter的,而是将它们应用到元素背后的内容上,这就是玻璃变形面板如何模糊下面的页面。The 玻璃化生成器 建立这些声明。
为了使元素本身褪色,简单 opacity 是更清晰的选择。 opacity() 当您已经在编写过滤器并希望同一行具有透明度时,过滤器链内部非常有用。
CSS 过滤器动画化吗?
是的。 filter 是可动画的,而一个常见的图案是灰度标志,在悬停时变成颜色:
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
浏览器在两者之间进行插值 grayscale(100%) 並 none 因为 none 被当作它们恒等值处的匹配函数,当两个状态都以相同的顺序列出相同的函数时,插值工作干净,如果开始和结束列表的顺序不同,结果可以跳转而不是平滑地动画化,所以写出两个状态具有相同的函数顺序。
CSS滤波器会损害性能吗?
Filters 渲染时间成本高,模煳成本最高,浏览器通常在 GPU 上运行 filters,这使得大多数彩色滤镜价格便宜。 blur() 是不同的:作品随着模糊半径和区域大小的增长而增长,因此全屏元素上的大半径,尤其是动画或位于滚动内容后面的半径,可以在较慢的设备上丢帧。
实际限制:
- 在大元素上保持模糊半径较小,并避免使半径本身充满活力。
- 模糊较小的元素或缩小的图像,而不是整页包装。
- 对于运动,有活力
transform並opacity浏览器高效处理,并保持过滤器静态。 - 在中端手机上进行测试,而不仅仅是桌面。
有关特定影响的常见问题
有一些效果经常出现,足以写出来。
黑白图像: filter: grayscale(100%); 100%以下的值留下一些颜色,所以 grayscale(50%) 呈现出静音的样子。
文本后面的调光背景图像: filter: brightness(60%); on image element。之后检查文本对比度而不是猜测; the 颜色对比度检查器 给出 WCAG 比率。
嵌入文档或图表的粗略深色模式: filter: invert(100%) hue-rotate(180deg); 倒转翻转明暗但也使色调转向相反;将色调旋转 180 度使大多数颜色回到原来的色调。它是一个近似值,里面的照片看起来会错误,所以排除它们。
音色黑白: filter: grayscale(100%) sepia(60%); 正如上面所讨论的。
全套 CSS 构建器(包括文本阴影和变换)已上线 CSS 工具集线器。
生成器是私有的吗?
是的。预览和 CSS 是在您的浏览器中使用 JavaScript 生成的。没有上传任何内容,一开始没有图像可以上传,并且一旦页面加载,工具就会离线工作。复制 CSS 计入每日使用限制,仅记录发生副本。
