請看下面的圖片：
想像一下底部的藍色矩形，具有混合混合模式：差異，正在慢慢向上移動到頂部。我希望它忽略紅色條紋並在穿過它時保持藍色，但當它位於綠色條紋上時使用混合混合模式。我該如何去做呢？
您可以將混合混合模式放在您想要更改藍色矩形的矩形上，並將其保留在不更改藍色矩形的矩形上。
這是一個簡單的例子：
<style> .green { width: 200px; height: 100px; background: lime; mix-blend-mode: difference; } .red { width: 200px; height: 100px; background: red; } .blue { width: 100px; height: 100px; background: blue; animation: move 5s infinite linear; osition: absolute; } @keyframes move { 0% { margin-top: 0px; } 100% { margin-top: -300px; } } </style> <div class="green"></div> <div class="red"></div> <div class="blue"></div>
您可以將混合混合模式放在您想要更改藍色矩形的矩形上，並將其保留在不更改藍色矩形的矩形上。
這是一個簡單的例子：
<style> .green { width: 200px; height: 100px; background: lime; mix-blend-mode: difference; } .red { width: 200px; height: 100px; background: red; } .blue { width: 100px; height: 100px; background: blue; animation: move 5s infinite linear; osition: absolute; } @keyframes move { 0% { margin-top: 0px; } 100% { margin-top: -300px; } } </style> <div class="green"></div> <div class="red"></div> <div class="blue"></div>