2つの異なる見出しの背景が同じですか？ （RGBキーボードのような効果）

Question

RGB版のCSS版を作成する予定です。テキストグラデーションを作成するのは簡単ですが、見出しの間のグラデーションは現時点では不可能です。このような結果を達成する方法はありますか？

私は、個々の勾配アニメーションとブレンドモードを試してみましたが、それでも方法を把握することはできません。

設定するとき、私は... RGBキーボードとして同期されていない、

Answer 1

.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; 
 
}

<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>

を背景クリップを使用して、個々の見出しの美しいグラデーションのアニメーションを達成したが、勾配は「個人のですキーの背景色（）と背景色（#000）をキーで入力し、次にmix-blend-modeをmultiplyに設定すると、背景（background-color）は黒のままで、前景（コンテナの背景がどんな値であれ、それは何かを取得します：

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