如何实现CSS彩虹渐变叠加层边缘与背景平滑透明融合？

你需要在底层背景上方创建纯CSS彩虹渐变叠加层，要求中心区域完全不透明，边缘逐渐过渡为透明并与背景无缝融合。当前使用mask结合两个线性渐变的实现，得到的是两个渐变的并集而非交集，无法达到预期效果。

解决方案：修改遮罩复合模式 #

CSS mask默认的复合模式是add（多个遮罩层叠加，显示所有不透明区域），我们需要将其改为intersect（仅显示所有遮罩层共同的不透明区域），同时添加浏览器前缀保证兼容性。

修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Fading of CSS-Generated Rainbow Gradient</title>
    <style>
        .container {
            position: relative;
            width: 500px;
            height: 300px;
            overflow: hidden;
            background: repeating-linear-gradient(45deg, #f00, #f00 10px, #0f0 10px, #0f0 20px);
        }

        .rainbow-overlay {
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
            mask: 
                linear-gradient(transparent 10%, black 20%, black 80%, transparent 90%),
                linear-gradient(to right, transparent 10%, black 20%, black 80%, transparent 90%);
            /* 标准复合模式：取交集 */
            mask-composite: intersect;
            /* Safari 兼容写法 */
            -webkit-mask-composite: source-in;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="rainbow-overlay"></div>
    </div>
</body>
</html>

原理说明 #

• mask-composite: intersect：让多个遮罩层仅保留共同的不透明区域，也就是垂直渐变和水平渐变的重叠部分，从而实现矩形中心区域不透明、上下左右边缘平滑过渡到透明的效果。
• -webkit-mask-composite: source-in：针对Safari浏览器的兼容写法，作用与标准的intersect一致，仅显示两个遮罩层的交集区域。

替代方案：使用径向渐变遮罩 #

如果想要更柔和的边缘过渡，也可以直接用径向渐变作为遮罩，无需多个渐变复合：

.rainbow-overlay {
    /* 其他样式不变 */
    mask: radial-gradient(ellipse 100% 100% at center, black 60%, transparent 85%);
    -webkit-mask: radial-gradient(ellipse 100% 100% at center, black 60%, transparent 85%);
}

这种方式会生成矩形的径向渐变遮罩，中心不透明、边缘平滑透明，效果更圆润，适合不需要严格矩形边缘过渡的场景。

内容的提问来源于stack exchange，提问作者cridnirk