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

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

解决方案：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

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

1. 使用
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>

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

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

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