如何实现Div镂空背景效果，无缝透出下层渐变背景？

现有代码如下：

CSS代码 #

html, body {
  margin: 0;
  padding: 0;
}
div {
  justify-content: center;
  align-items: center;     
  display: flex;
}
.background {           
  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
  height: 100vh;
  width: 100vw;
}
.container {            
  background-color: white;
  height: 50vh;
  width: 50vw;
}
.button {
  background-color: red;    
  padding: 10vh;
}

HTML代码 #

<!DOCTYPE html>
<html>
    <body>
        <div class="background">
            <div class="container">
                <div class="button">
                    Button
                </div>
            </div>
        </div>
    </body>
</html>

需求是让.button区域的背景和.background的渐变完全连贯，看起来就像在白色的.container上挖了个洞，直接透出底层的渐变背景。之前直接给.button加相同渐变的方法不行，因为渐变会基于按钮自身尺寸重新生成，和底层渐变对不上。

方案一：用background-attachment: fixed 对齐渐变 #

修改.button的CSS样式，让它的渐变和底层大背景共用同一个参考系：

.button {
  background-color: transparent; /* 删掉原来的红色背景 */
  padding: 10vh;
  /* 用和.background完全一样的渐变 */
  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
  /* 关键：让背景以整个浏览器窗口为基准，而非按钮本身 */
  background-attachment: fixed;
}

原理很简单：默认渐变是跟着元素走的，按钮自己的渐变会从按钮左上角开始计算，和底层大背景的渐变起点不一样，自然对不上。加了background-attachment: fixed之后，按钮的渐变就会以整个视口为基准渲染，和底层大背景的渐变完全重合，看起来就像按钮那里是个洞，直接透出后面的渐变了。

方案二：用CSS Mask 实现真正的"挖洞" #

如果需要更复杂的挖洞形状（比如圆形、不规则形状），可以用CSS的mask属性，直接让.container的白色背景在按钮区域"消失"：

修改.container的CSS：

.container {            
  background-color: white;
  height: 50vh;
  width: 50vw;
  /* 按钮位置挖洞：透明区域是洞，黑色区域保留白色背景 */
  mask: radial-gradient(circle at center, transparent 30%, black 30%);
  /* 兼容Chrome、Safari等webkit内核浏览器 */
  -webkit-mask: radial-gradient(circle at center, transparent 30%, black 30%);
}

同时把.button的背景色去掉：

.button {
  background-color: transparent;    
  padding: 10vh;
}

这种方式不需要给按钮设置背景，而是直接让容器的白色背景在按钮区域被遮掉，底层渐变自然透出来，视觉效果更纯粹，适合各种复杂形状的挖洞需求。

内容的提问来源于stack exchange，提问作者William Brochensque junior