设置SVG背景的div添加线性渐变后SVG无法显示如何解决

• 你写的background是CSS背景复合属性，会直接覆盖前面声明的所有独立背景属性（包括你先定义的background-image: url(xxx.svg)），所以SVG背景直接被后续的渐变设置覆盖了。
• 线性渐变本身属于CSSbackground-image的可取值类型，支持和图片类背景叠加展示。

将SVG和渐变合并写到同一条background-image属性中，用逗号分隔即可，写在前面的背景会层级更高，显示在上方。如果需要SVG显示在渐变上方，写法如下：

background-image: url(../images/icon-background.svg), linear-gradient(134.71deg, #006BAD -0.5%, #4C60BB 99.31%);
/* 如果需要分别控制两个背景的尺寸、位置，同样用逗号分隔对应即可，示例： */
background-size: 60px 60px, cover; /* 第一个值对应SVG尺寸，第二个对应渐变尺寸 */
background-position: left 20px center, 0 0; /* 第一个值对应SVG位置，第二个对应渐变位置 */
background-repeat: no-repeat, no-repeat;

注意事项 #

• 请确保你的SVG本身存在透明区域，否则完全不透明的SVG会完全遮挡下方的渐变，看不到渐变效果。
• 如果需要渐变显示在SVG上方，调换两个背景的书写顺序即可。

内容的提问来源于stack exchange，提问作者user14649590