CSS background blend mode black mask-CodePudding

Using css background-blend-mode I'm trying setup a mask where the first background image white parts apply a black color mask on the last one.

Here is a code sample showing where I'm stuck:

To give you an example of the final result I want:

CodePudding user response：

What you can do is instead of relying on blending mode, which gives you very little control over the color, is to actually overlay your .container with a pseudo element that has the SVG in an alternative color palette that you want (in this case, a background of #1499ff and a fill of #000000.

Then, you can use clip-path to hide the rest of the overlay, and use CSS properties to control the position of the overlay (if needed). See example below:

// Optional JS to demonstrate an interactable mask
document.querySelector('.container').addEventListener('mousemove', (e) => {
  e.target.style.setProperty('--circleX', `${e.clientX}px`);
  e.target.style.setProperty('--circleY', `${e.clientY}px`);
});

.container {
  background-color: black;
  width: 200px;
  height: 200px;
  background-image: url('data:image/svg xml,');
  position: relative;
}

.container,
.container::after {
  background-size: auto;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.container::after {
  position: absolute;
  cursor: pointer;
  content: '';
  inset: 0;
  background-color: #1499ff;
  background-image: url('data:image/svg xml,');
  clip-path: circle(50px at var(--circleX, 50%) var(--circleY, 50%));
}

<div class="container">
</div>