DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
CSS 过滤器是一个强大的工具,作者可以使用它来实现不同的视觉效果(有点像浏览器的 Photoshop 过滤器)。 CSS filter
属性在元素显示之前提供对元素渲染的模糊或颜色偏移等效果的访问。 过滤器通常用于调整图像、背景或边框的渲染。
语法是
.filter-me {
filter: blur(3px);
filter: grayscale(1);
filter: saturate(2.2);
filter: none; /* remove existing filter */
}
有许多函数可用于值
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url()
– 用于应用 SVG 过滤器custom()
– “即将推出”
可以使用多个函数,用空格隔开。
.do-more-things {
filter: blur(20px) grayscale(20%);
}
过滤器函数
要使用 CSS 过滤器属性,请为上面列出的以下函数之一指定一个值。 如果值无效,则函数返回“none”。 除非另有说明,否则以百分号表示的值(如 34%)的函数也接受以小数表示的值(如 0.34)。
这是一个演示,可以让您随意玩弄各个过滤器。
grayscale()
filter: grayscale(20%)
/* same as... */
filter: grayscale(0.2);
将输入图像转换为灰度。 “amount”的值定义转换的比例。 100% 的值完全为灰度。 0% 的值使输入保持不变。 0% 到 100% 之间的值是对效果的线性倍数。 如果缺少“amount”参数,则使用 100% 的值。 不允许负值。
sepia()
filter: sepia(0.8);
/* same as... */
filter: sepia(80%);
将输入图像转换为棕褐色。 “amount”的值定义转换的比例。 100% 的值完全为棕褐色。 0% 的值使输入保持不变。 0% 到 100% 之间的值是对效果的线性倍数。 如果缺少“amount”参数,则使用 100% 的值。 不允许负值。
saturate()
filter: saturate(2);
/* same as... */
filter: saturate(200%);
使输入图像饱和。 “amount”的值定义转换的比例。 0% 的值完全不饱和。 100% 的值使输入保持不变。 其他值是对效果的线性倍数。 允许超过 100% 的值,提供超级饱和的结果。 如果缺少“amount”参数,则使用 100% 的值。 不允许负值。
hue-rotate()
filter: hue-rotate(180deg);
/* same as... */
filter: hue-rotate(0.5turn);
对输入图像应用色调旋转。 “angle”的值定义输入样本将围绕色轮调整的度数。 0deg 的值使输入保持不变。 如果缺少“angle”参数,则使用 0deg
的值。 最大值为 360deg
。
invert()
filter: invert(100%);
反转输入图像中的样本。 “amount”的值定义转换的比例。 100% 的值完全反转。 0% 的值使输入保持不变。 0% 到 100% 之间的值是对效果的线性倍数。 如果缺少“amount”参数,则使用 100% 的值。 不允许负值。
opacity()
filter: opacity(0.5);
/* same as... */
filter: opacity(50%);
对输入图像中的样本应用透明度。 “amount”的值定义了转换的比例。 0% 的值为完全透明。 100% 的值保持输入不变。 0% 到 100% 之间的值是效果的线性倍数。 这等效于将输入图像样本乘以 amount。 如果“amount”参数缺失,则使用 100% 的值。 此函数类似于更成熟的 opacity 属性; 区别在于,对于过滤器,某些浏览器提供硬件加速以提高性能。 不允许负值。
brightness()
filter: brightness(0.5);
/* same as... */
filter: brightness(50%);
将线性倍数应用于输入图像,使其看起来更亮或更暗。 0% 的值将创建一个完全黑色的图像。 100% 的值保持输入不变。 其他值是效果的线性倍数。 允许 amount 大于 100% 的值,提供更亮的结果。 如果“amount”参数缺失,则使用 100% 的值。
contrast()
filter: contrast(4);
/* same as... */
filter: contrast(400%);
调整输入的对比度。 0% 的值将创建一个完全黑色的图像。 100% 的值保持输入不变。 允许 amount 大于 100% 的值,提供对比度更低的结果。 如果“amount”参数缺失,则使用 100% 的值。
blur()
filter: blur(5px);
filter: blur(1rem);
对输入图像应用高斯模糊。 “radius”的值定义了高斯函数的标准偏差值,或者屏幕上多少像素相互混合,因此较大的值将产生更多模糊。 如果没有提供参数,则使用 0 值。 参数指定为 CSS 长度,但不接受百分比值。
drop-shadow()
filter: drop-shadow(2px 2px 5px rgb(0 0 0 / 0.5));
filter: drop-shadow(4px 4px red); /* no blur */
对输入图像应用阴影效果。 阴影实际上是输入图像 alpha 遮罩的模糊、偏移版本,以特定颜色绘制,并合成在图像下方。 该函数接受类型为 (在 CSS3 背景中定义) 的参数,但 “inset” 关键字除外。
此函数类似于更成熟的 box-shadow 属性; 区别在于,对于过滤器,某些浏览器提供硬件加速以提高性能。
与 box-shadow
只将框作为其路径处理不同,drop-shadow 还会自然地模拟预期对象的轮廓。
就像 text-shadow 一样,没有 “spread” 参数来创建大于对象的实心阴影。
url()
filter: url()
url()
函数采用指定 SVG 过滤器的 XML 文件的位置,并且可以包含指向特定过滤器元素的锚点。 这是一个教程,它可以作为 SVG 过滤器的良好介绍,并附带一个有趣的演示。
Animating Filters
由于过滤器是可动画的,因此可以打开许多有趣的可能性。
Notes
您可以组合任意数量的函数来操纵渲染,但顺序仍然很重要(即,在 sepia()
之后使用 grayscale()
将导致完全灰色的输出)。
除了 “none” 之外的计算值将创建堆叠上下文,与 CSS 透明度相同。 过滤器属性对目标元素的框模型的几何形状没有影响,即使过滤器会导致在元素的边框框之外进行绘制。 目标元素的任何部分都受过滤器函数的影响。 这包括应用过滤器的元素及其后代的任何内容、背景、边框、文本装饰、轮廓和可见滚动机制。 过滤器也可以应用于内联内容,例如单个文本跨度。
该规范还引入了用于图像的 filter(image-URL, filter-functions)
包装函数。 它可以让您在 CSS 中使用图像时对任何图像进行过滤。 例如,您可以模糊背景图像,而不会模糊文本。 此过滤器函数目前浏览器尚不支持。 作为临时解决方案,您可以将背景和过滤器都应用于伪元素,以创建类似的效果。
IE 专属过滤器
也使用了 filter
属性,例如
.half-opacity {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
主要用于需要支持 IE 8 及以下版本的透明度。
更多信息
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
18* | 35 | 否 | 79 | 6* |
移动/平板
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 4.4* | 6.0-6.1* |
我对你们的工作感到非常惊讶。
我住在印度,我刚开始我的网页设计生涯,所以有很多东西我不知道,我总是需要帮助,每次我搜索一个我不知道的东西,我都会在这个网站上找到它。
谢谢谢谢谢谢你们伟大的工作。
这个网站为所有负担不起昂贵在线教育的人们做了很棒的事情,因为他们缺乏时间和资源,主要是我没有时间、金钱,而且大多也没有资源,但有了像这样的服务的帮助,我正在走向优秀的网页设计师职业生涯。
如果你的网站需要任何帮助,我就在这里支持你。
我的邮箱 [email protected]
Facebook striker.a.a.a
继续你们令人惊叹的工作!
:)
是的,这是一个很棒的网站。
动画在 Firefox 46.0.1 上根本不起作用。
有什么想法吗?
干杯…
嘿,你只需要将代码从 -webkit- 更改为不带那个(或添加不带 -webkit- 的新行)。就像那样
然后它将在 Mozilla 上运行。Chris 只为 Chrome 和 Safari 编写了代码。
感谢您的教程。
我注意到表格中说 Firefox 不受支持。
我遇到了这个:“-webkit-filter: blur(20px);”。那么效果在 Firefox 中会起作用吗?
-webkit-
仅影响 Chrome、Opera(15+)和 Safari。你可以在 Firefox 中使用 svg 进行 filter 操作。现在在 Firefox 中支持,无需供应商前缀。:)
-webkit 仅影响 Chrome、Safari 等浏览器。
如果您要与 Firefox 一起使用它,可以尝试 -ms-filter
实际上,你需要为 Firefox 使用 -moz。-ms 用于 Microsoft Internet Explorer
您好,使用本文和西班牙语的@kseso 解释,我制作了这个演示:http://codepen.io/g3kdigital/pen/cxCvu 我展示了如何仅使用 CSS 和过滤器更改标签的颜色,但目前仅在 -webkit- 中有效。干杯。
非常棒的用例。
那是一个令人惊叹的过滤器示例。
发现你写了
其中一个是
检查了源代码,你被它缠住了。
无论如何,只是说 :D
对于 Firefox,你只需要将 -webkit 替换为 -moz
例如
-moz-filter:grayscale(1);-webkit-filter:grayscale(1);
供您参考 (CMIIW) css 前缀
-khtml- (Konqueror,非常旧的 Safari)
-moz- (Firefox)
-o- (Opera)
-ms- (Internet Explorer)
-webkit- (Safari、Chrome)
Firefox 前缀 -moz- 不起作用。你必须使用
演示
有趣的是,它在新的 Firefox 开发人员版本中有效(因此希望完全支持即将推出 - caniuse 建议 v35 将在没有供应商前缀的情况下完全支持)。
我只是放了
” filter: opacity(.2); ”
没有 “-webkit-filter: opacity(.2);”
在 Firefox 开发人员版本 “36.0a2 (2014-12-10)” 中运行良好。
感谢精彩的教程,它很简洁 :D
太棒了 :D!!! 谢谢
小修正
你没有在最顶部的列表中包含“saturate”。
谢谢。已修复。
感谢您的宝贵建议。我的客户希望在其主页的照片上使用棕褐色调,很高兴知道我可以让 CSS 随时转换图像。
哇!很高兴看到它在我的最喜欢的浏览器上运行:Mozilla Firefox!我在 FF Dev Edition 上看到了它,很高兴它也在这里!
:) :) :)
太棒了,用大写的“A”表示!
嘿,基督,我不知道是不是只有我的问题,还是网络连接,但代码笔嵌入的示例没有显示,或者当它们显示时只是显示了一半。也许你想看看
干杯,顺便说一句,很棒的文章
我最近需要将蓝色的 PNG 图标在悬停时变为白色。
我使用以下方法实现了这一点,并认为其他人可能会发现它有用。
谢谢 Justin - 正是我需要的。
如果是加载的 SVG 图标,或者使用一些 PNG,你也可以这样做
filter: contrast(0) brightness(200%);
很高兴它对你有用。
Justin!你帮我节省了大量的工作……虽然我经历了地狱才找到你的小代码片段 ;-)
谢谢谢谢谢谢。
不客气!
如果你在那个 hack 中遇到任何跨浏览器问题,请告诉我。
非常感谢你!这正是我要找的。我一直试图找到一种方法,在我的背景图像上淡化黑色,而不必将图像放在 HTML 标签中,已经几个小时了。我正准备放弃睡觉,这时我看到了这个。现在我可能不会睡觉了,因为我太兴奋了!
感谢您的教程。
我一直以为在 CSS 中使用过滤器不需要供应商前缀。事实并非如此,因为当我只使用
filter: blur(5px);
对于图像,图像保持不变,但当我使用
-webkit-filter: blur(5px);
因此,可以正确地假设仍然需要供应商前缀吗?
提前致谢。
但是,我发现这个 css 在 css 验证器中无效。有没有什么解决方案可以帮助它得到正确的验证?
您的示例图像路径/URL/src 丢失了。:)
我也注意到了。当你点击“在 Codepen 上编辑”链接时,它可以工作。奇怪。
该图像似乎对某些域启用了热链接保护。
仅 css 动画开始按钮:http://codepen.io/anon/pen/JGYqgq
如何将过滤器应用于 bgImage 但不影响顶部的文本?
唯一的解决方法是将文本和背景容器分开,然后将文本绝对定位在该容器之上
很酷的东西..
有没有过滤器可以使我的图片更清晰?
谢谢!
是否可以将过滤器应用于仅选择?例如,将黑色像素反转为白色,等等。我真的很需要尽快得到帮助,请。
嗨,我一直在玩这些过滤器……奇怪的是,当我尝试将图像变为白色时,只有标题上的图像受到影响。不知道为什么……
我的代码
您好,我想要将背景设置为模糊过滤器,而上面的任何文本都需要保持正常。
请任何人给我建议解决方案。
嗨
我偶然发现了一个错误。
如果你在固定定位元素的父元素上使用过滤器。
你的固定位置将不起作用。
基于 ID 的 URL 过滤器在 Firefox 中不起作用,有什么解决方案吗?
例如,查看您的链接:https://codepen.io/grayghostvisuals/pen/noItd 在 Firefox 浏览器中。
您知道浏览器何时会支持 filter: custom() 功能吗?
在此之前,有没有办法使用 SVG 应用自定义着色器?