如何在覆盖css的底角制作一个孔区域

Posted 2023-02-24

【中文标题】如何在覆盖css的底角制作一个孔区域

【英文标题】：how to make a hole area in the bottom corner of the overlay css

【发布时间】：2021-08-04 05:11:31

【问题描述】：

我尝试在叠加层的底角制作一个孔区域，如下图所示，但仍然遇到问题。

这里是代码示例

 <div className="container h-screen bg-overlay fixed z-50 opacity-90 holes"> 
 </div>

.holes::before 
      content: "";
      display: block;
      /* Scale */
      width: 50px;
      padding: 10px 0px;
      /* Position */
      position: absolute;
      top: 90%;
      right: 60%;
      z-index: 2;
      /* Border */
      border: solid 80px rgb(255,255,255);
      border-radius: 50%;
      opacity: 0.7;
  

但上面的代码仍然不合适，因为它没有在左下角打洞，而是用伪类打了一个新洞

【问题讨论】：

您希望“洞”是真正的洞，即显示任何可能在后面的东西（背景图像、文本等），还是您希望它只是如图所示有点白？

CSS 掩码（或一些常见浏览器上的 -webkit-mask）会为你挖一个洞。

【参考方案1】：

可以使用伪类来实现。如果您不希望它发出任何事件，则可以使用 after 或 before。

你需要一个完整的圆还是半个？

.container 
  width: 100%;
  height: 300px;
  position: relative;
  background-color: blue;


.round 
  position: absolute;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid yellow;
  background-color: #fff;
  bottom: -50px;
  left: 50px;
  color: #777;
  font-size: 16px;

<div class='container'>
  <span class='round'>UPLOAD</span>
</div>

编辑

在圆内添加文字

【讨论】：

谢谢你的回答，但是我想再问一下，如果覆盖的右上角的洞里有文字，那么文字是不可见的（即使我使用不透明度下面的文字会模糊，有解决办法吗？）这是一个示例图片：imgur.com/a/qfY8KYh

我上传了上面相同的sn-p，里面有一段文字。正如我所说，由于您需要这一轮的事件，为了方便，我将伪元素更改为span。

谢谢，但在我的例子中，代码结构是这样的（jsbin.com/qedohit/edit?html,output），所以文本不在孔/容器类中，而是在另一个元素中

好的，如果文本在其他包装器中，只需添加它并保留该轮的伪类

【参考方案2】：

您可以使用 CSS 蒙版在元素中以径向渐变作为蒙版图像切割一个洞。您可以将带有背景径向渐变的孔周围的黄色边框放在同一位置。

这个 sn-p 有一个洋红色的容器背景，所以你可以看到一个真正的“洞”被切割成下面显示的任何东西（尽管背景径向渐变会用透明层覆盖它）。

注意：在整页查看sn-p

.container 
  background-color: magenta;
  display: inline-block;
  width: 100vw;
  height: 100vh;


.div 
  -webkit-mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
  mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
  background-color: skyblue;
  background-image: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, yellow 50px, yellow 53px, transparent 53px, transparent 100%);
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 0;

<div class="container">
  <div class="div"></div>
</div>

【讨论】：

啊，谢谢你的回答，我现在知道如何实现它了