时间戳

首页 > 解决方案 > 处理 div 的重叠

css - 处理 div 的重叠

问题描述

我希望红色圆圈的内部为白色，同时与蓝色圆圈重叠，其余部分透明，以便您可以看到绿色。

如果有人知道如何处理这个问题，我会很高兴。

#bigCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: rgba(0,0,250,0.5);
}

.smallCircle {
    margin-top: -244px;
    margin-left: 1px;
    border: solid rgb(226, 85, 20);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color:rgba(255,255,255,0);
  }
        <div id="bigCircle">
                <div id="middleCircle">
                    <div class="smallCircle" />
                </div>
        </div >

标签： cssoverlap

解决方案

将 aradial-gradient作为您固定的背景颜色并与蓝色圆圈具有相同的位置：

#bigCircle,
#middleCircle{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
  width: 240px;
  height: 240px;
  background-color: rgba(0, 0, 250, 0.5);
}

.smallCircle {
  margin-top: -244px;
  margin-left: 1px;
  border: solid rgb(226, 85, 20);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition:1s all;
  background:radial-gradient(circle 120px at 190px 190px,#fff 99%,transparent 100%) fixed;
}
#middleCircle:hover .smallCircle {
  margin-top: -100px;
}
body {
  margin:0;
}
<div id="bigCircle">
  <div id="middleCircle">
    <div class="smallCircle" ></div>
  </div>
</div>

推荐阅读