Question

我有一个黑色的文本与一个黑色的div重叠-我想使文本的一部分，即重叠的是白色。因此，我尝试使用mix-blend-mode，但是它不起作用。为何如此？

快速演示：

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: black;
    font-size: 9rem;
    mix-blend-mode: difference;
    z-index: 1;
  }

  .centered-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(calc(-50% - 10vh)) translateX(-50%);
    width: 22.5rem;
    height: 30rem;
    background-color: black;
  }

<h1>This<br/>is a<br/>test</h1>
<div class="centered-block"/>

Answer 1

您不能使用黑色文本进行混合混合模式。

如果背景为白色，则表示为rgb（255,255,255）。如果您的文本是黑色，则您的颜色将为rgb（0,0,0），因此，如果减去每列（颜色），并且您获得了绝对值，那么您将获得rgb（255,255,255），因此文本仍为白底白字。如果您的文本是白色rgb（255,255,255），并且减去rgb（0,0,0）并获得绝对值，则白底黑字。如果您的背景是黑色rgb（0,0,0），而您的文本是白色rgb（255,255,255），则会得到白色文本。如果您的文本是黑色rgb（0,0,0），并且背景也是黑色rgb（0,0,0），则差异为rgb（0,0,0），因此黑色为黑色（这是您的示例）。

简单的答案就是将color: white;设为h1。另外，您还需要设置主体背景颜色，以便您的文本与不覆盖任何内容时有所不同（例如，示例中的文本在覆盖白色时仍具有黑色文本，这不是因为混合混合模式，它是因为它没有什么可与之融为一体的。）因此，请像这样实现它：

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: white;
    font-size: 9rem;
    mix-blend-mode: difference;
    z-index: 1;
  }

  .centered-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(calc(-50% - 10vh)) translateX(-50%);
    width: 22.5rem;
    height: 30rem;
    background-color: black;
  }
  
  body {
  background-color: white;
  }

<h1>This<br/>is a<br/>test</h1>
<div class="centered-block"/>

混合混合模式差异未按预期工作

1 个答案: