仅使用 CSS 实现多个透明圆形（切割）

Question

仅使用 CSS 实现多个透明圆形（切割）

9

我已经阅读了这个很棒的问题：仅使用CSS制作透明空心或减去圆形，但我想要画更多的圆（比方说三个）。

因此，我尝试使用一个额外的元素来代替伪元素（以便我可以添加更多），对于一个圆，它可以工作，但对于更多圆就不行了。问题是它们不透明，因为最后一个圆盖住了一切。这是我的尝试：

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>

- Theodore K.

1

这种技术无法适用于多个圆，你必须使用SVG。每个圆的盒子阴影都会彼此可见，这使其看起来好像只剩下一个圆。顺便说一下，这是一个有趣的问题！ - connexo

1

你可以从 https://css-tricks.com/clipping-masking-css/ 中获取一些想法。 - Patrick

这可能会对你有所帮助，朋友。http://stackoverflow.com/questions/20360750/multiple-perfect-circles-in-css#20361533 - gutierrezalex

4个回答

6

如果你真的想用CSS实现这个效果，并且不害怕使用多个box-shadow，那么你可以这样做。但是请注意，这是硬编码的方法，当圆形改变位置、大小或数量时，box-shadow的值必须更新。

下面是一个示例，box-shadow的值应该被“优化”：

body {
  background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;
}
.shape {
  height: 150px;
  width: 150px;
  position: relative;
  overflow: hidden;
}
.hole {
  position: absolute;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  color: red;
}
.hole:nth-child(1) {
  left: 25px;
  top: 25px;
  box-shadow: -38px -33px 0px 55px black, 9px 14px 0px 0px black;
}
.hole:nth-child(2) {
  left: 65px;
  top: 25px;
  box-shadow: 76px -63px 0px 100px black, -7px 6px 0px 0px black;
}
.hole:nth-child(3) {
  left: 55px;
  top: 65px;
  box-shadow: -3px 91px 0px 100px black;
}

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

除此之外，我强烈建议使用SVG技术，可以使用遮罩/剪切或路径方式，如您所链接的答案。以下是使用弧形命令的路径元素示例，其中包含多个剪切透明圆：

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
svg{
  display:block;
  width:70%;
  height:auto;
  margin:0 auto;
}
path{
  transition:fill .5s;
  fill:#E3DFD2;
}

<svg viewbox="-10 -1 30 15">
  <path d="M-10 -1 H30 V15 H-10z 
           M 5 5 m -5, 0 
           a 5,5 0 1,0 10,0 
           a 5,5 0 1,0 -10,0
           M-3 10 m -2, 0
           a 2,2 0 1 ,0 4,0
           a 2,2 0 1 ,0 -4,0
           M15 8 m -2, 0
           a 2,2 0 1 ,0 4,0
           a 2,2 0 1 ,0 -4,0
           M-5 5 m -2, 0
           a 2,2 0 1 ,0 4,0
           a 2,2 0 1 ,0 -4,0"/>
</svg>

上述代码格式化后，路径元素中的每个圆都是使用“：”绘制的。

M cx cy m -r, 0
a r,r 0 1,0 (r * 2),0
a r,r 0 1,0 -(r * 2),0

圆心为cx, cy，半径为r。有关说明，请参见此答案。
第一行(M-10 -1 H30 V15 H-10z)用于制作周围的矩形，每个圆形“剪切”它。

这种方法的优点是适用于所有支持内联svg的浏览器，即使不支持遮罩或剪辑也是如此。

要了解如何工作，您应该查看：

- web-tiki

0

您可以使用RGBA颜色值来指定不透明度，而不是对于阴影使用单一颜色以达到所需效果。

尝试使用 box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0 , 0.1);

- nashcheez

感谢您的努力，但这不是期望的效果，我正在尝试在黑色正方形中绘制透明圆形。 - Theodore K.

这并没有解决核心问题。可能它甚至不理解核心问题。 - connexo

这个回答确实理解了核心问题。但事实上，很难达到提问者所要求的，因此这个回答提供了一个替代方案（提问者不同意也没关系 :))。 - nashcheez

0

<!DOCTYPE html>
<html>
<head>
<style>
.shape{  
    height: 150px;
    width: 150px;
    position:relative;
    overflow:hidden;
 background-color:#333333;
}
.hole{
    position:absolute;
    border-radius:20px;
    width:20px; 
 height:20px;
    color:red;
    background-color:white;
 opacity:0.6; /* for transparency levels change between 0=invisible and 1=opaque */
 text-align:center;
}
.hole:nth-child(1) {
    left:25px; top:25px; 
}
.hole:nth-child(2) {
    left:65px; top:25px; 
}
.hole:nth-child(3) {
    left:55px; top:65px; 
}
</style>
</head>
<body>
 <div class="shape">
   <div class="hole">1</div>
   <div class="hole">2</div>
   <div class="hole">3</div>
 </div>
</body>
</html>

- Sahana

不透明度有多个级别。您可以根据需要在0和1之间进行更改，并添加所需的颜色。如果圆和背景使用相同的颜色，则无法看到圆。即使圆是100％透明，您也无法看到圆。只有当圆具有半透明度且与背景不同颜色时，您才能看到它。 - Sahana

很抱歉在不了解问题的情况下试图提供解决方案 :( - Sahana

4

答案几乎从不应只包含代码。 - connexo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Qwertiy · Accepted Answer

只需使用 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>