如何使混合混合模式忽略某些背景？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何使混合混合模式忽略某些背景？

P粉418351692 2023-09-15 10:20:50

[CSS3讨论组]

820

请看下面的图片：

想象一下底部的蓝色矩形，具有混合混合模式：差异，正在慢慢向上移动到顶部。我希望它忽略红色条纹并在穿过它时保持蓝色，但当它位于绿色条纹上时使用混合混合模式。我该如何去做呢？

P粉418351692

全部回复(1)

P粉0233267732023-09-16 00:31:28 1楼

您可以将混合混合模式放在您想要更改蓝色矩形的矩形上，并将其保留在不更改蓝色矩形的矩形上。

这是一个简单的例子：

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