CSS实现：如何用mask-image为background-image添加遮罩

我需要为一个div设置常规的background-image，并通过mask-image对其进行修改，使页面中设置了background-attachment: fixed;的背景能像透过窗口一样在div后方“浮动”。具体需求如下：

• 遮罩图支持PNG或SVG格式；
• 即便使用SVG，也不想采用mask:url(mask.svg#element);的方式，因为SVG图形可能包含模糊、渐变等灰度效果，而非简单的剪切遮罩；
• 遮罩遵循“白色=不透明/黑色=透明”的标准规则；
• 疑问：mask-mode: alpha;是否适用于该配置？

目前实现的示例存在两个问题：

1. 依赖SVG的id而非完整图片；
2. 遮罩尺寸远小于div。

现有代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    color: #174;
    background-color: #def;
    font-family: sans-serif;
}
.masked-bg {
    width: 600px;
    height: 600px;
    
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAL0lEQVQIW22KQQ4AMAjC4P+PZlXnzZoYwVpypFjACsHmCtPlZwxAaCqf5XzWWPsB9TsMBL7veUEAAAAASUVORK5CYII=);
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 10px;
    image-rendering: pixelated;
    
    mask-image: url(#svgmask);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    mask-origin: content-box;
}
</style>
</head>
<body>

<h1>mask-image</h1>
<p>with a fixed background</p>

<div class="masked-bg"></div>

<svg width="0" height="0"> <!-- sized to 0 because this SVG data is only to be used in the div background  -->
    <mask id="svgmask">
        <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
        <text x="0" y="36" fill="white" transform="rotate(30 20,40)" font-family="sans-serif">V e c t o r</text>
    </mask>
</svg>

</body>
</html>

关于mask-mode: alpha;的适用性 #

你需要的“白色=不透明/黑色=透明”规则对应的是亮度遮罩（luminance mask），而mask-mode: alpha;是基于图片的alpha通道（透明度）实现遮罩，并不适用。想要遵循白显黑隐、灰度半透的规则，应该使用mask-mode: luminance;——现代浏览器在使用PNG或SVG图片作为mask-image时，默认会根据图片亮度值处理遮罩，所以即使不显式设置，也能符合需求，但显式声明可确保跨浏览器行为一致。

解决现有两个问题 #

1. 摆脱对SVG id的依赖 #

直接将SVG作为完整图片资源使用（外部.svg文件或base64嵌入均可），无需定义<mask>元素，SVG内的模糊、渐变等灰度效果会自动被当作亮度值处理，实现预期遮罩效果。

2. 让遮罩尺寸匹配div #

将mask-size设置为100% 100%（或根据需求用cover/contain），搭配mask-repeat: no-repeat，确保遮罩完全覆盖div区域。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
body {
    color: #174;
    background-color: #def;
    font-family: sans-serif;
}
.masked-bg {
    width: 600px;
    height: 600px;
    
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAL0lEQVQIW22KQQ4AMAjC4P+PZlXnzZoYwVpypFjACsHmCtPlZwxAaCqf5XzWWPsB9TsMBL7veUEAAAAASUVORK5CYII=);
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 10px;
    image-rendering: pixelated;
    
    /* 使用base64嵌入的完整SVG作为遮罩，无需依赖id */
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjYwMCIgdmlld0JveD0iMCAwIDYwMCA2MDAiPjxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIiBmaWxsPSJ3aGl0ZSIvPjxwb2x5Z29uIGZpbGw9IndoaXRlIiBwb2ludHM9IjEwMCwxMCA0MCwxOTggMTkwLDc4IDEwLDc4IDE2MCwxOTgiLz48dGV4dCB4PSIwIiB5PSIzNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0icm90YXRlKDMwIDIwLDQwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiI+ViBlIGN0b3IgUjwvdGV4dD48L3N2Zz4=');
    mask-repeat: no-repeat;
    mask-size: 100% 100%; /* 让遮罩完全覆盖div */
    mask-position: center;
    /* 显式设置亮度遮罩模式，确保规则生效 */
    mask-mode: luminance;
}
</style>
</head>
<body>

<h1>mask-image</h1>
<p>with a fixed background</p>

<div class="masked-bg"></div>

</body>
</html>

代码说明：

• 把原本的SVG内容转换为base64嵌入，作为完整图片资源传递给mask-image，不再依赖页面内的SVG id；
• mask-size: 100% 100%确保遮罩铺满整个div；
• mask-mode: luminance明确指定亮度遮罩规则，避免浏览器行为差异。

补充说明 #

如果使用PNG作为遮罩，只需将mask-image的URL替换为PNG图片路径（或base64），浏览器会自动根据PNG的亮度值应用遮罩规则，白色区域显示背景，黑色区域隐藏，灰度区域呈现半透明效果。

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