添加了 SVG 的背景的不透明度

Question

我有一个 div 将 SVG 设置为背景图像。我现在添加了一个线性渐变作为背景，但因为它是块色，所以 SVG 没有显示出来。有什么想法可以让 SVG 显示出来吗？

background-image: url(../images/icon-background.svg);
background: linear-gradient(134.71deg, #006BAD -0.5%, #4C60BB 99.31%);

Answer 1

background 是所有 CSS 背景属性的 shorthand，因此 background-image 被渐变覆盖。您可以尝试为 SVG 使用单独的元素并将其放置在渐变之前。

Answer 2

您可以将图像和渐变添加到 background-image 属性:

div {
  width: 400px;
  height: 400px;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><circle cx="15" cy="15" r="15" fill="red"/></svg>'),
    linear-gradient(134.71deg, #006BAD -0.5%, #4C60BB 99.31%);
}

<div></div>

添加了 SVG 的背景的不透明度

Opacity of background that has SVG added to it

css

svg

sass