CSS 背景混合模式黑色遮罩

Question

使用 css background-blend-mode 我正在尝试设置一个蒙版，其中第一个背景图像的白色部分在最后一个背景图像上应用黑色蒙版。

这是一个代码示例，显示了我遇到的问题：https://codepen.io/BackNight/pen/YzQgyjo

.container {
  background-color: black;
  width: 200px;
  height: 200px;
  background-image: url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23fff" fill-opacity="1" fill-rule="evenodd"%3E%3Cpath d="M0 40L40 0H20L0 20M40 40V20L20 40"/%3E%3C/g%3E%3C/svg%3E'), radial-gradient(closest-side, #1499ff calc(100% - 1px), transparent);
  background-size: auto, 75px 75px;
  background-repeat: no-repeat;
  background-position: right bottom, right 40px bottom;
  background-blend-mode: difference;
}

我只能得到一个带有“差异”模式的橙色，我只需要它是黑色的：

举个我想要的最终结果的例子：

Answer 1

你可以做的不是依赖混合模式，它让你几乎无法控制颜色，而是用一个伪元素覆盖你的.container，该伪元素在替代调色板中具有 SVG您想要的（在本例中，背景 #1499ff 和填充 #000000.

然后，您可以使用 clip-path 隐藏覆盖的其余部分，并使用 CSS 属性来控制覆盖的位置（如果需要）。请参阅下面的示例：

// 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,%3Csvg width="100" height="100" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23fff" fill-opacity="1" fill-rule="evenodd"%3E%3Cpath d="M0 40L40 0H20L0 20M40 40V20L20 40"/%3E%3C/g%3E%3C/svg%3E');
  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,%3Csvg width="100" height="100" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000" fill-opacity="1" fill-rule="evenodd"%3E%3Cpath d="M0 40L40 0H20L0 20M40 40V20L20 40"/%3E%3C/g%3E%3C/svg%3E');
  clip-path: circle(50px at var(--circleX, 50%) var(--circleY, 50%));
}

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

CSS 背景混合模式黑色遮罩

CSS background blend mode black mask

css

background-blend-mode