时间戳

首页 > 解决方案 > 混合混合模式差异未按预期工作

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

问题描述

我有一个黑色文本与黑色 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"/>

标签： htmlcss

解决方案

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

如果您有白色背景，则表示为 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"/>

推荐阅读