可能两个不同标题的背景相同吗？ （RGB键盘效果）

Question

我打算创建一个CSS版本的RGB键盘。使文本渐变很容易，但要真正的“SYNC”＃39;标题之间的渐变对我来说是不可能的。有没有办法实现这种结果？

我尝试了单独的渐变动画和混合模式，但仍然无法找到出路。

我使用了背景剪辑，并为各个标题实现了漂亮的渐变动画，但渐变是“个人”，而不是同步为RGB键盘......

Answer 1

＆＃13;

＆＃13;

.keyboard {
  background-image: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  display: inline-block;
}

.key {
  display: inline-block;
  width: 35px;
  height: 35px;
  font-size: 1.5em;
  text-align: center;
  padding-top: 5px;
  margin: 5px;

  /* THE IMPORTANT STUFF */
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
}

＆＃13;

<div class="keyboard">
  <div class="key">A</div>
  <div class="key">B</div>
  <div class="key">C</div>
  <div class="key">D</div>
  <div class="key">E</div>
  <div class="key">...</div>
</div>

＆＃13;

＆＃13;

＆＃13;

在键上将颜色设置为白色（#fff）并将背景颜色设置为黑色（#000），然后将mix-blend-mode设置为multiply，然后background（background-color）保持黑色，前景（color）获取容器背景的任何值：

color c;
c x white === c
c x black === black