background-image使用svg，改变颜色

如果要在CSS中使用SVG作为背景图片并且改变其颜色，你可以通过CSS的filter属性和SVG的feColorMatrix滤镜来实现。具体步骤如下：

1. 在CSS中设置SVG作为背景图片

background-image: url('your-svg-file.svg');
background-size: contain;
background-repeat: no-repeat;

2. 添加CSS filter属性

filter: invert(1) grayscale(1) brightness(2) sepia(1);

这个属性允许你应用多个滤镜效果，其中invert(1)将整个SVG反转，使其变成白色，grayscale(1)会将其变为灰度图像，brightness(2)可以调整亮度，sepia(1)可以添加褐色色调。

3. 添加SVG的feColorMatrix滤镜

将以下代码添加到SVG文件中的<defs>标签中：

<filter id="color-overlay">
  <feColorMatrix type="matrix" values="0 0 0 0 1
                                       0 0 0 0 1
                                       0 0 0 0 1
                                       0 0 0 1 0" />
</filter>

这个滤镜将转换SVG的颜色矩阵，将其所有颜色转换为纯白色。你可以根据需要调整values值来更改颜色矩阵。

4. 将滤镜应用于SVG

在CSS中，将filter属性设置为SVG的id（在本例中为color-overlay），这将应用feColorMatrix滤镜。

filter: url('#color-overlay') invert(1) grayscale(1) brightness(2) sepia(1);

5. 更改颜色

你可以通过更改SVG的颜色矩阵来更改SVG的颜色。例如，如果你想要红色的SVG，可以将values设置为：

<feColorMatrix type="matrix" values="1 0 0 0 0
                                       0 0 0 0 0
                                       0 0 0 0 0
                                       0 0 0 1 0" />

这个矩阵将红色通道设置为100%，其他通道设置为0%，从而使整个SVG变为红色。