Opacity of background that has SVG added to it-CodePudding

I have a div that has an SVG set as the background image. I've now added a linear gradient as the background but because it's block colour, the SVG isn't showing through. Any ideas how to get the SVG to show through?

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

CodePudding user response：

You can add both image and gradient to the background-image property:

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>

CodePudding user response：

background is a shorthand for all CSS background attributes, thus background-image is being overridden by the gradient. You could try using a separate element for the SVG and position it in front of the gradient.