CSS混合混合模式/只有白色或黑色答案

【问题标题】：CSS mix blend mode / only white or blackCSS混合混合模式/只有白色或黑色
【发布时间】：2021-08-05 05:41:27
【问题描述】：

您好，如果背景为白色或其他情况下为黑色，我目前正在尝试找到一种解决方案，使粘性文本变为黑色。在我的研究中，我发现了混合混合模式属性，但制作我想要的东西似乎非常复杂。

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  color:white;
  font-size:60px;
  mix-blend-mode: difference;
}
.panel {
  height: 80vh;
  widht: 100%;
}

.bg-black {
  background: black;
}

.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

.bg-green {
  background: green;
}

<div class="sticky">
  My text
</div>
<div>
  <section class="panel"></section>
  <section class="panel bg-black"></section>
  <section class="panel bg-red"></section>
  <section class="panel bg-blue"></section>
  <section class="panel bg-green"></section>
</div>

有人知道可以帮助我的 hack 或软件包吗？

非常感谢

【问题讨论】：

调整您的代码示例，因为没有 css 并且您的 css 在问题中被破坏。
嗨，这可能需要改写：“如果背景是白色或在任何其他情况下为黑色，则将文本设为黑色” - 应该是“或在其他情况下为白色”。

标签： css mix-blend-mode

【解决方案1】：

我不确定mix-blend-mode 是否可行，但可以使用filter 和background-clip: text 做你想做的事：

// can ignore this, it's just making the sliders work as R G B
function updateColor() {
  const r = document.getElementById('r').value;
  const g = document.getElementById('g').value;
  const b = document.getElementById('b').value;
  
  document.querySelector('.container').style.background = `rgb(${r},${g},${b}`;
}

.container {
  background: white;
}

.contrast-text {
  font-size: 50vmin;

  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: 
    sepia(5)      /* add some color to grey so the rest works */
    saturate(100) /* increase strength of color channels */
    invert(1)     /* invert the color */
    grayscale(1)  /* make it grey */
    contrast(9);  /* make it black/white */
}

<input type="range" onchange="updateColor()" min=0 max=255 value=255 id="r">
<input type="range" onchange="updateColor()" min=0 max=255 value=255 id="g">
<input type="range" onchange="updateColor()" min=0 max=255 value=255 id="b">

<div class="container">
  <div class="contrast-text"> Text </div>
</div>

【讨论】：

谢谢你的回答，但不幸的是我需要我的文字是粘性的，它似乎与你的解决方案一起工作...... :'( 我们不能只在一个元素上应用一个假背景来制作mix-blend-mode 工作？或者你有任何其他的粘性元素解决方案？

【解决方案2】：

我终于找到了很棒的东西！它不如mix-blend-mode 漂亮，但它可以胜任。

我宁愿保持 100% css，因为它需要使用 ScrollMagic

const controller = new ScrollMagic.Controller();
const sections = document.querySelectorAll('section');
const menu = document.querySelector('.my-text');


sections.forEach((section, index, arr) => {
  const trigger = '#' + section.id;
  const backgroundColor = window.getComputedStyle(section, null).getPropertyValue('background-color');
 
  const textColor = getContrastYIQ(backgroundColor);

  let previousBackgroundColor = backgroundColor;
  let previousTextColor = getContrastYIQ(previousBackgroundColor);
  

  if (index >= 1) {
    previousBackgroundColor = window.getComputedStyle(arr[index - 1], null).getPropertyValue('background-color');
    previousTextColor = getContrastYIQ(previousBackgroundColor);
  }

  new ScrollMagic.Scene({
      triggerElement: trigger,
      triggerHook: "onLeave",
      offset: -50,
      reverse: true
    })
    .on("enter", function() {
      menu.classList.remove(previousTextColor);
      menu.classList.add(textColor);

    })
    .on("leave", function() {
      menu.classList.remove(textColor);       menu.classList.add(previousTextColor);

    })
    .addTo(controller);
})

// Color contrast helper function
// https://en.wikipedia.org/wiki/YIQ
function getContrastYIQ(rgb) {
  rgb = rgb.substring(4, rgb.length - 1)
    .replace(/ /g, '')
    .split(',');
  const yiq = ((rgb[0] * 299) + (rgb[1] * 587) + (rgb[2] * 114)) / 1000;
  return (yiq >= 128) ? 'black' : 'white';
}

section {
  min-height: 80vh;
}

.my-text {
  position: sticky;
  top: 5vh;
  color: white;
}

.black {
    color: black;
    &:before {
      background: black;
      box-shadow: 0 0.4em 0 0 black, 0 0.80em 0 0 black;
    }
 }

#s1 {
  background-color: black;
}

#s2 {
  background-color:  white;
}

#s3 {
  background-color: #111;
}

#s4 {
  background-color: #9f3;
}

#s5 {
  background-color: #145;
}

#s6 {
  background-color: #f5f; 
}

<script ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<div class="my-text">
  MY TEXT</div>
<section id="s1">
</section>
<section id="s2"></section>
<section id="s3"></section>
<section id="s4"></section>
<section id="s5"></section>
<section id="s6"></section>

【讨论】：