# 组件如何增加滤镜

来源快照：`result_data_new_260518.json`

- 来源 ID：`1970297382941965240`
- 模块：低代码平台e-builder
- 目录：常见问答 - 页面设计
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**问题描述：**

组件如何增加滤镜

**  
**

**解决方式：**

**  
**

组件—开启自定义外观样式—容器—其他—添加滤镜即可（搭配渐变背景实现饱和度、明暗度调整，效果更加美观）

 

blur() 模糊图像。传入值单位为px

 

brightness() 让图像更明亮或更暗淡，0% 将创建全黑图像，100% 展示原图，大于100%展示更明亮的图片效果。

 

contrast() 增加或减少图像的对比度，值是0%图像全灰图像，没有对比度。100% 展示原图，大于100%展示对比度更高的图片效果。

 

saturate() 超饱和或去饱和输入的图像，值为0% 则是完全不饱和，完全转为灰度图像，100% 展示原图，大于100% 则有更高的饱和度。

 

hue-rotate() 改变图整体色调，angle设定图像会被调整的色环角度值。值为0deg展示原图，大于360deg相当于又绕一圈。

 

grayscale() 改变图像灰度，值在 0% 到 100% 之间，值为0%展示原图，值为100% 则完全转为灰度图像。

 

invert() 反转图像颜色,值在 0% 和 100% 之间,100% 的价值是完全反转。值为 0% 则图像无变化。

 

sepia()将图像转为棕褐色，值在 0% 到 100% 之间，值为 100% 则完全是深褐色的，值为 0% 图像无变化。

 

**  
**![](https://weapp.eteams.cn/papi/file/preview?fileId=1157720894577704981&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
