CSS 滤镜效果
**CSS 滤镜效果**模块中的属性允许您定义在元素在文档中显示之前处理元素渲染的方式。此类效果的示例包括模糊和更改元素颜色的强度。
滤镜效果在行动
使用各种滑块将滤镜效果应用于下面的图像
要查看此滤镜效果示例的代码,请在 GitHub 上查看源代码。
属性
函数
指南
- 使用 CSS 滤镜效果
-
围绕 CSS 滤镜效果的概念概述,包括属性、滤镜函数和 SVG 滤镜,并解释滤镜值、源顺序和值交互。
相关概念
<image>
数据类型<filter-function>
数据类型background-image
CSS 属性background-blend-mode
CSS 属性mix-blend-mode
CSS 属性- 插值 词汇表术语
color-interpolation-filters
SVG 属性
规范
规范 |
---|
滤镜效果模块第 2 级 |
滤镜效果模块第 1 级 |
另请参阅
- CSS 合成和混合模块中的属性使能够将元素的背景图层混合在一起并将元素与其容器混合
- SVG
<filter>
元素和 SVG 滤镜基元:<feSpotLight>
、<feBlend>
、<feColorMatrix>
、<feComponentTransfer>
、<feComposite>
、<feConvolveMatrix>
、<feDiffuseLighting>
、<feDisplacementMap>
、<feDropShadow>
、<feFlood>
、<feGaussianBlur>
、<feImage>
、<feMerge>
、<feMorphology>
、<feOffset>
、<feSpecularLighting>
、<feTile>
、<feTurbulence>