利用 CSS 效果,您可以为元素添加视觉效果,或配置元素与重叠元素的混合方式。在媒体规则中,您可以为 CSS 效果添加动画以及覆盖 CSS 效果。
在选择单个元素后,您可以在 CSS 效果面板中找到 CSS 效果设置。如果该面板未显示在工作区中,您可以从窗口菜单中将其切换为可见状态。
CSS 效果无法应用于遮罩。
混合模式
混合模式决定着元素内容和元素背景如何根据元素和背景颜色的色调、饱和度和亮度值进行混合。
如需应用混合模式,请执行以下操作:
- 选择要与背景混合的元素。
- 在 CSS 效果面板中,使用混合模式下拉菜单选择一种混合模式。
您可以尝试选择不同的混合模式来预览相应效果。如果某个元素未按照您预期的方式进行混合,请检查所选元素是否位于您想要与之混合的其他元素前面。
混合模式列表
- 正常(不包含任何效果)- 不混合。
- 颜色 - 使用元素颜色的色调和饱和度以及背景颜色的亮度。
- 颜色加深 - 反转背景颜色,将其除以元素颜色,然后反转结果颜色。
- 颜色减淡 - 将背景颜色除以元素颜色的反色。
- 调暗 - 使用元素或背景中较深的深色。
- 差值 - 从较浅颜色中减去较深颜色。
- 排除 - 与差值模式的处理方式相同,但对比度较低。
- 强光 - 如果元素颜色比背景颜色深,则应用正片叠底模式;如果元素颜色比背景颜色浅,则应用滤色模式。
- 色调 - 使用元素颜色的色调以及背景颜色的饱和度和亮度。
- 调亮 - 使用元素或背景中较浅的颜色。
- 亮度 - 使用元素颜色的亮度以及背景颜色的色调和饱和度。
- 正片叠底 - 将元素颜色与背景颜色相乘。
- 叠加 - 如果元素颜色比背景颜色浅,则应用正片叠底模式;如果元素颜色比背景颜色深,则应用滤色模式。
- 饱和度 - 使用元素颜色的饱和度以及背景颜色的色调和亮度。
- 滤色 - 反转元素颜色和背景颜色,将其相乘,然后反转结果颜色。
- 柔光 - 与强光模式的处理方式相同,但效果较柔和。
滤镜
借助滤镜,您可以为使用 CSS 的元素添加视觉效果,例如模糊或阴影。
在视频文档和图片广告中,您可以使用背景幕工具将 CSS 滤镜应用到元素后面的区域。
添加滤镜
如需添加新滤镜,请执行以下操作:
- 选择要添加滤镜的元素。
- 在 CSS 效果面板中,点击 添加滤镜。
- 选择要应用的滤镜。您可以使用以下滤镜:
- 根据需要调整配置选项。(如需更多信息,请参见下文。)
您可以为元素添加多个滤镜,在这种情况下,您可以对滤镜进行重新排序。
滤镜列表
模糊为元素应用模糊效果。
配置选项
- 半径 - 模糊效果的半径,介于 0 像素到 100 像素之间。
调高或调低元素亮度。
配置选项
- 百分比 - 0% 会使元素变为黑色,而 100% 会使元素保持不变。百分比上限为 1000%。
调整元素的对比度。
配置选项
- 百分比 - 0% 会使元素变为灰色,而 100% 会使元素保持不变。百分比上限为 1000%。
为元素添加阴影。
配置选项
- 偏移 x - 阴影的水平距离,介于 -100 像素到 100 像素之间。
- 偏移 y - 阴影的垂直距离,介于 -100 像素到 100 像素之间。
- 半径 - 阴影的模糊半径,介于 0 像素到 100 像素之间。
- 颜色 - 阴影的颜色。
将元素转换为灰度模式。
配置选项
- 百分比 - 0% 会使元素保持不变,而 100% 会使元素完全变为灰度模式。
调整元素的颜色。
配置选项
- 角度 - 绕色轮旋转的角度,介于 0° 到 360° 之间。
反转元素的颜色。
配置选项
- 百分比 - 0% 会使元素保持不变,而 100% 会完全翻转元素的颜色。
更改元素的不透明度。
配置选项
- 百分比 - 0% 会使元素完全透明,而 100% 会使元素保持不变。
调整元素的饱和度。
配置选项
- 百分比 - 0% 会使元素完全不饱和,而 100% 会使元素保持不变。百分比上限为 1000%。
将元素转换为棕褐色。
配置选项
- 百分比 - 0% 会使元素保持不变,而 100% 会使元素完全变为棕褐色。
对滤镜进行重新排序
如果为同一个元素应用了多个滤镜,它们会按照在 CSS 效果面板中的显示顺序进行应用。
如需对滤镜进行重新排序,请执行以下操作:
- 找到要重新排序的滤镜,然后将鼠标悬停在其名称上。系统会显示三个点 。
- 使用这三个点作为手柄,将该滤镜拖放到面板中的目标位置。
隐藏滤镜
您可以隐藏某个滤镜,隐藏后,其效果将不会显示在场景、预览或已发布的文件中。
如需隐藏滤镜,请执行以下操作:
- 将鼠标悬停在相应滤镜名称上。
- 点击隐藏 图标。
- 如需重新显示相应滤镜,请点击显示 图标。
已隐藏的滤镜的控件无法修改。
删除滤镜
如需删除某个滤镜,请执行以下操作:
- 将鼠标悬停在相应滤镜名称上。
- 点击删除 图标。