HTML 滤镜使用实例

以下是HTML滤镜使用实例：

1. 设置图片灰度：

<img src="image.jpg" style="filter: grayscale(100%);">

2. 设置图片模糊：

<img src="image.jpg" style="filter: blur(5px);">

3. 设置图片饱和度：

<img src="image.jpg" style="filter: saturate(20%);">

4. 设置图片亮度：

<img src="image.jpg" style="filter: brightness(50%);">

5. 设置图片对比度：

<img src="image.jpg" style="filter: contrast(200%);">

注意：不同的浏览器可能对滤镜的支持有所不同。

相关问题

svg colorMatrix如何使用

SVG colorMatrix是一种SVG滤镜，用于对图像进行颜色转换。它可以用于改变图像的亮度、对比度、饱和度和色相等属性。

使用SVG colorMatrix，需要创建一个<filter>元素，并在该元素中定义一个<feColorMatrix>元素。以下是一个基本的使用示例：

<svg>
  <defs>
    <filter id="colorMatrixFilter">
      <feColorMatrix type="matrix"
          values="1.2 0 0 0 0
                  0 0.8 0 0 0
                  0 0 0.6 0 0
                  0 0 0 1 0"/>
    </filter>
  </defs>
  <image xlink:href="image.png" width="100%" height="100%" filter="url(#colorMatrixFilter)" />
</svg>

在这个例子中，我们定义了一个名为colorMatrixFilter的滤镜，它包含了一个feColorMatrix元素。type属性指定了矩阵的类型，这里是matrix。values属性是一个包含20个数字的字符串，这些数字表示矩阵的值。

在这个例子中，我们使用colorMatrixFilter滤镜来处理一个图像。我们可以使用values属性中的数字来调整图像的亮度、对比度、饱和度和色相等属性。例如，将第一个值从1.2修改为0.8可以降低图像的亮度，而将第二个值从0.8修改为1.2可以增加图像的对比度。

总的来说，SVG colorMatrix是一种非常有用的工具，可以用于创建各种各样的视觉效果。您可以尝试不同的矩阵值来实现您所需的效果。

svg feFuncR如何使用

SVG的feFuncR元素是SVG中的一种滤镜元素，用于处理颜色通道。它可以用来调整图像的红色通道，从而使图像呈现出不同的颜色效果。

使用SVG的feFuncR元素，需要创建一个<filter>元素，并在该元素中定义一个<feComponentTransfer>元素。以下是一个基本的使用示例：

<svg>
  <defs>
    <filter id="redFilter">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="0.5 1"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <image xlink:href="image.png" width="100%" height="100%" filter="url(#redFilter)" />
</svg>

在这个例子中，我们定义了一个名为redFilter的滤镜，它包含了一个feComponentTransfer元素。而在feComponentTransfer元素中，我们定义了一个feFuncR元素，type属性指定了表格转换的类型，这里是table。而tableValues属性则是一个包含两个数字的字符串，这些数字表示了每个输入级别对应的输出级别。

在这个例子中，我们使用redFilter滤镜来处理一个图像。我们将表格转换的tableValues属性设置为"0.5 1"，这意味着将输入级别为0.5的像素映射到输出级别为1的像素。这样可以将图像的红色通道减少一半，从而使图像呈现出深色的效果。

总的来说，SVG的feFuncR元素是一种非常有用的工具，可以用于创建各种各样的视觉效果。您可以尝试不同的表格值来实现您所需的效果。