时间戳

首页 > 解决方案 > CSS如何在两个项目重叠的部分更改颜色？

css - CSS如何在两个项目重叠的部分更改颜色？

问题描述

<div class="circle" style="top:75px;left:75px;background:#7B3F61;"></div>
<div class="circle" style="top:75px;left:175px;background:#E78481;"></div>

<style>  
  .circle {position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;}
  body{background: #09042A;}
</style>

我正在尝试获取第二个圆形 div 与第一个重叠的部分，以更改颜色，而我要使用的颜色是背景色。所以效果看起来就像两个圆圈相遇的地方，它们相互抵消，你看到的只是背景。

我一直在考虑如何解决这个问题，但我就是想不通，有人可以帮助我吗？

标签： css

解决方案

您可以mix-blend-mode: color-burn;在您的情况下使用财产。

<div class="circle" style="top:75px;left:75px;background:#7B3F61;"></div>
<div class="circle" style="top:75px;left:175px;background:#E78481;"></div>

<style>
  .circle {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    mix-blend-mode: color-burn;
  }
  
  body {
    background: #09042A;
  }
</style>

推荐阅读