如何为 SVG 图片添加渐变效果？

如何使用 创建背景图片渐变效果？

有用户咨询如何通过 CSS 为背景图片添加渐变效果，但按照文章指导的方法未能成功。

解决方案：

为 SVG 格式的图片添加渐变效果，可以使用 CSS filter 技术。具体步骤如下：

1. 使用 标签创建 SVG 图片元素。
2. 在 元素中，定义渐变效果。例如：

<svg>
  <defs>
    <linearGradient id="gradient">
      <stop offset="0%" stop-color="#ff0000" />
      <stop offset="100%" stop-color="#0000ff" />
    </linearGradient>
  </defs>
  <filter id="filter">
    <feFlood flood-color="transparent" result="flood" />
    <feComposite in="SourceGraphic" in2="flood" operator="in" result="composite" />
    <feMerge>
      <feMergeNode in="flood" />
      <feMergeNode in="composite" -->
    </feMerge>
  </filter>
</svg>

登录后复制

1. 将 filter 引用到背景图片中：

background-image: url(image.svg);
background-filter: url(#filter);

登录后复制

通过这种方法，可以为 SVG 格式的图片添加渐变效果。

以上就是如何为 SVG 图片添加渐变效果？的详细内容，更多请关注GTHOST其它相关文章！