CSS3 滤镜过滤器属性增强图像视觉效果

CSS3 filter 滤镜属性是一个强大的工具，它允许您使用各种滤镜效果来增强图像的视觉效果。通过使用 filter 属性，您可以创建高斯模糊、亮度、对比度、饱和度等效果。这些效果可以帮助您创建更具吸引力、更具交互性的网页。

CSS3 滤镜属性语法

CSS3 滤镜属性的语法如下：

filter: <filter-function> [<filter-function>]...;

其中，<filter-function> 可以是以下值之一：

• blur()：给图像设置高斯模糊。
• brightness()：调整图像的亮度。
• contrast()：调整图像的对比度。
• saturate()：调整图像的饱和度。
• hue-rotate()：旋转图像的色调。
• drop-shadow()：在图像周围添加阴影。
• grayscale()：将图像转换为灰度。
• sepia()：将图像转换为棕褐色。
• invert()：反转图像的颜色。
• opacity()：调整图像的透明度。

您可以使用多个滤镜函数来创建更复杂的效果。例如，您可以使用 blur() 和 brightness() 函数来创建高斯模糊的明亮图像。

CSS3 滤镜属性示例

以下是一些 CSS3 滤镜属性的示例：

/* 高斯模糊 */
filter: blur(10px);

/* 亮度 */
filter: brightness(1.2);

/* 对比度 */
filter: contrast(1.5);

/* 饱和度 */
filter: saturate(1.5);

/* 色调旋转 */
filter: hue-rotate(90deg);

/* 阴影 */
filter: drop-shadow(10px 10px 5px black);

/* 灰度 */
filter: grayscale(1);

/* 棕褐色 */
filter: sepia(1);

/* 反转 */
filter: invert(1);

/* 透明度 */
filter: opacity(0.5);

小程序高斯模糊的使用

在小程序中，您可以使用 wx.canvasBlur() 函数来给图像设置高斯模糊效果。wx.canvasBlur() 函数的语法如下：

wx.canvasBlur(canvasId, width, height, blur, cb);

其中，canvasId 是 canvas 的 ID，width 和 height 是 canvas 的宽高，blur 是高斯模糊的程度，cb 是回调函数。

以下是一个使用 wx.canvasBlur() 函数来给图像设置高斯模糊效果的示例：

wx.canvasBlur('canvasId', 100, 100, 10, function(res) {
  console.log(res);
});

结论

CSS3 滤镜属性是一个强大的工具，它允许您使用各种滤镜效果来增强图像的视觉效果。通过使用 filter 属性，您可以创建更具吸引力、更具交互性的网页。在小程序中，您可以使用 wx.canvasBlur() 函数来给图像设置高斯模糊效果。