CSS背景混合模式黑色蒙版答案

【问题标题】：CSS background blend mode black maskCSS背景混合模式黑色蒙版
【发布时间】：2021-11-22 00:34:55
【问题描述】：

使用 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;
}

我只能通过“差异”模式获得橙色，而我只需要它是黑色：

给你一个我想要的最终结果的例子：

【问题讨论】：

这就是difference 在混合中的工作方式......当与白色混合时，您基本上会得到完全反转的颜色。
我知道，我尝试了所有混合选项，但没有人按照我的意愿行事，所以我正在寻找建议或帮助

标签： css background-blend-mode

【解决方案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>

【讨论】：