如何通过SVG实现div镂空透明，显示下层div视差背景图片

实现原理 #

利用CSS mask属性实现区域镂空：mask中白色区域对应上层div可见，黑色区域对应上层div透明，可直接透出下层视差元素内容。

修改后代码 #

HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="index.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="parallax.min.js"></script>
        <!-- 定义镂空用的mask，不直接渲染 -->
        <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute;visibility:hidden;">
            <defs>
                <mask id="cutMask" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse" viewBox="0 0 800 600">
                    <!-- 白色背景：对应div区域可见 -->
                    <rect width="800" height="600" fill="#fff"/>
                    <!-- 黑色路径：对应div区域镂空透明 -->
                    <path fill="#000" d="M 200 600 Q 300 600 300 500 Q 300 350 400 350 Q 500 350 500 500 Q 500 600 600 600 "></path>
                </mask>
            </defs>
        </svg>
    </head>
    <body>
        <div class="top"></div>
        <div class="parallax" data-parallax="scroll" data-image-src="./img/Compressed 2.jpg"></div>
    </body>
</html>

CSS代码 #

body{
    width: 100vw;
    height: 300vh;   
    position: relative;
    margin: 0;
    background-color: #f5f6fa;
}

.top{
    background: #0f0c29; 
    background: -webkit-linear-gradient(to top, #24243e, #302b63, #0f0c29);
    background: linear-gradient(to top, #24243e, #302b63, #0f0c29);
    width: 100vw;
    height: 50vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    /* 应用mask，加webkit前缀兼容主流浏览器 */
    -webkit-mask: url(#cutMask);
    mask: url(#cutMask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.parallax {
    width: 100vw;
    min-height: 50vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

关键修改点说明 #

• 把原来直接放在.top内的SVG改造成mask定义，放在head内隐藏不直接渲染：mask内先铺满白色矩形保证大部分区域可见，再放黑色路径实现指定位置镂空
• 调整两个div的定位与层级：.top设置更高z-index在上层，.parallax放在下层重叠，镂空位置可直接透出视差效果
• 给.top添加mask属性关联定义好的mask，设置mask尺寸铺满整个div，避免拉伸变形

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