css遮盖和穿透效果思路

1. 新标签，定位遮挡，内容可以移至新标签，或设置其透明度

2. 伪元素，定位遮挡，内容可以移至新标签，或设置其透明度

3. mask遮挡

mask遮挡分为，单mask遮挡，这个没什么好说的，基本用法

还有就是，多mask遮挡

已经使用了一个mask来实现其他效果，这时还需要一个遮挡，隐藏某些位置，可以使用mask的合成 mask-composite

例如： 要遮住一个图形的中间部分，可以使用

/* 设置content-box只遮挡中间内容部分 */
mask: linear-gradient(#000 0 0) content-box
mask-composite: source-in

/* 要透视后面的内容，可以将黑色改为透明 */
linear-gradient(#0000 0 0) content-box

4. 背景穿透 和 背景遮挡

背景的穿透和遮挡主要是使用渐变

背景穿透

background-image可以穿透background-color

.con {
    background-color: blue;
    background-image: radial-gradient(transparent 50px, #fff 50px);
    background-size: 4px 4px;
}

background-color层级更低，background-image使用渐变，透明的部分可以穿透，显示后面的背景色
如上所示，径向渐变的透明部分显示背景色，就成为一个个圆形，非透明部分则显示为背景色
这里，可以不用mask，直接实现类似mask的镂空和穿透效果
渐变，可以通过背景这种方式，实现多种镂空和穿透的效果，可以先尝试此思路，不行再上mask

背景遮挡

背景也可以用来遮挡，例如 使用多背景，底层背景使用 radial-gradient(transparent 100px, #fff 10px)，就可以遮挡中间100px的圆形区域，
若配合 background-origin: content-box 或 background-clip: content-box, 透明半径设大一些，则可以实现内容区域精确遮挡