html – 多透明的圆圈,只使用CSS(剪切)

发布时间：2020-12-14 19:31:40 所属栏目：资源来源：网络整理

导读：我已经读过这个伟大的问题 Transparent hollow or cut out circle 但我想画更多的圈子(比方说三个). 所以我尝试使用一个额外的元素为圆,而不是一个伪元素(所以我可以添加更多),它适用于一个圆,但不是更多.问题在于它们不透明,因为最后一个涵盖了所有内容.这

我已经读过这个伟大的问题 Transparent hollow or cut out circle
但我想画更多的圈子(比方说三个).

所以我尝试使用一个额外的元素为圆,而不是一个伪元素(所以我可以添加更多),它适用于一个圆,但不是更多.问题在于它们不透明,因为最后一个涵盖了所有内容.这是我的尝试：

body{
  background-color:violet;
}
.shape{  
    height: 150px;
    width: 150px;
    position:relative;
    overflow:hidden;
}
.hole{
    position:absolute;
    border-radius:100%;
    width:30px; height:30px;
    color:red;
    box-shadow: 0px 0px 0px 2000px black;
}
.hole:nth-child(1) {
    left:25px; top:25px; 
}
.hole:nth-child(2) {
    left:65px; top:25px; 
}
.hole:nth-child(3) {
    left:55px; top:65px; 
}

<div class="shape">
  <div class="hole">1</div>
  <div class="hole">2</div>
  <div class="hole">3</div>
</div>

解决方法

只需使用svg.面罩的黑色部分从被应用的元件上移除并保持白色：

html,body {
  height: 100%;
  margin: 0;
  background: linear-gradient(to top,red,blue);
}

svg {
  display: block;
  width: 150px;
}

<svg viewBox="0 0 150 150">
  <mask id="circles" maskUnits="objectBoundingBox">
    <rect x="0" y="0" width="100%" height="100%" fill="white" />
    <circle cx="40" cy="40" r="15" fill="black" />
    <circle cx="80" cy="40" r="15" fill="black" />
    <circle cx="70" cy="80" r="15" fill="black" />
  </mask>
  
  <rect x="0" y="0" width="100%" height="100%" fill="green" style="mask: url(#circles)" />
</svg>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!