使用SVG clipPath做背景视频镂空效果时背景发灰该如何解决？

云上老周

2026-10-2

问题解决方案

你的代码主要存在层级逻辑错误、clipPath适配失效、视频自动播放被拦截三个问题，对应解决方案如下：

修复视频自动播放逻辑
现在主流浏览器默认禁止不带静音属性的视频自动播放，你未给video标签添加muted属性，会导致视频加载失败，呈现灰色黑屏。修改video标签如下：
```
<video class="video" autoplay muted loop width="100%" style="object-fit:cover;">
```

调整层级与clipPath作用逻辑
你当前把视频放在带clip-path的容器内部，且视频z-index低于容器的绿色背景，会导致视频被背景覆盖。如果你的预期是指定形状区域显示视频，其余区域为纯色遮罩，调整DOM和CSS如下：
DOM结构：

<div class="video_home_container">
  <!-- 底层铺满视频 -->
  <video class="video" autoplay muted loop>
    <source src="<?php echo get_template_directory_uri(); ?>/static/home.mp4" type="video/mp4">
  </video>
  <!-- 上层遮罩层 用clip-path挖空 -->
  <div class="video_home_mask"></div>
  <!-- 仅定义clipPath 隐藏不渲染 -->
  <svg width="0" height="0" style="visibility:hidden;position:absolute;" viewBox="0 0 2335 526">
    <clipPath id="mask">
      <path d="M587.505 411.454H487.962V312.839H587.505V213.814H487.962V115.145H587.505V11.1746H352.65V498.674L587.505 480.804V411.454Z" />
      <path d="M767.851 437.958H816.106L818.101 463.206L949.97 453.124L884.39 11.1746H688.473L626.664 477.88L765.282 467.305L767.851 437.958ZM791.924 126.976C798.809 213.814 805.695 286.68 812.581 345.574H765.856C769.545 299.641 778.043 226.684 791.924 126.976Z" />
      <path d="M1650.44 343.198V304.479H1515.13V388.065C1515.13 396.481 1514.91 403.422 1514.69 409.925L1648.58 399.706C1649.92 383.12 1650.44 364.648 1650.44 343.198Z" />
      <path d="M1465.8 393.175V151.351C1465.8 124.792 1467.42 107.796 1470.5 99.7077C1473.59 91.6196 1480.48 88.122 1491.63 88.122C1501.43 88.122 1507.83 91.3464 1510.92 97.7404C1514 104.134 1515.12 120.748 1515.12 146.679V255.568H1650.44V188.048C1650.44 139.465 1646.39 103.724 1638.3 80.8264C1630.11 58.1469 1613.11 38.6917 1587.21 22.8434C1561.11 7.92411 1528.24 0 1488.56 0C1459.16 0 1433.1 4.94583 1410.66 14.7554C1387.9 25.0295 1370.08 38.6918 1357.54 55.961C1345.28 71.7054 1337.34 90.3858 1334.54 110.146C1331.8 128.863 1330.55 157.117 1330.55 194.524V346.723C1330.23 372.486 1331.77 398.238 1335.16 423.778L1466.32 413.75C1466.08 407.629 1465.8 401.044 1465.8 393.175Z" />
      <path d="M1824.8 11.1746H1689.57V318.987C1689.57 351.175 1689.87 376.888 1690.69 396.589L1824.8 386.369V11.1746Z" />
      <path d="M1999.23 11.1746H1863.98V383.337L1999.23 373.035V11.1746Z" />
      <path d="M2334.43 115.145V11.1746H2038.34V115.145H2118.51V363.69L2253.82 353.607V115.145H2334.43Z" />
      <path d="M1117.09 296.635H1124.63C1143.27 296.635 1154.69 299.805 1159.06 306.855C1163.27 312.948 1165.59 328.25 1165.89 352.514C1165.89 354.208 1165.89 425.17 1165.89 436.674L1291.58 427.083V394.294C1291.58 352.268 1290.46 326.528 1288.25 317.293C1284.93 305.884 1279.04 295.387 1271.04 286.607C1261.58 275.349 1243.56 266.441 1216.96 259.884C1246.42 256.96 1266.34 248.626 1276.31 234.69C1286.28 220.755 1291.45 193.539 1291.45 153.044C1291.45 108.669 1284.26 76.2892 1270.24 56.0416C1256.23 35.794 1237.45 22.8422 1214.77 17.9784C1192.1 13.1146 1149 11.1746 1085.04 11.1746H989.237V450.145L1117.09 440.39V296.635ZM1117.09 99.8977H1124.63C1140.18 99.8977 1151.27 102.33 1156.96 107.822C1162.8 112.686 1165.73 122.741 1165.89 138.671V172.964C1165.54 193.512 1162.48 205.426 1156.96 209.224C1150.53 213.732 1140.01 215.7 1124.63 215.7H1117.09V99.8977Z" />
      <path d="M288.084 503.674C297.204 494.512 303.729 483.093 306.993 470.584C311.173 454.791 313.551 423.613 313.551 376.724V194.523C313.551 145.12 311.938 111.921 308.714 95.3892C305.688 78.3871 298.062 62.5389 286.663 49.5657C274.613 35.9034 256.879 26.0119 233.926 19.5086C210.755 13.7431 166.735 11.0652 101.375 11.0652H0V525.643L288.084 503.674ZM128.781 99.7885H135.312C150.395 99.7885 160.396 101.401 165.369 104.625C168.052 106.178 170.376 108.281 172.189 110.796C174.002 113.311 175.263 116.18 175.889 119.216C177.477 130.072 178.199 141.036 178.048 152.006V378.691C177.556 406.508 175.315 423.75 171.435 430.608C166.926 438.286 155.259 442.358 135.312 442.358H128.781V99.7885Z" />
    </clipPath>
  </svg>
</div>

对应CSS：

.video_home_container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
}
.video_home_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000; /* 可自定义为你需要的遮罩颜色 */
  z-index: 2;
  clip-path: url(#mask);
}

修复clipPath适配问题
给定义clipPath的svg添加viewBox="0 0 2335 526"属性，和你path的坐标范围匹配，就能保证蒙版形状自适应不同屏幕尺寸，不会出现路径超出可视区域的问题。
如果你的预期是视频本身裁剪为logo形状，其余区域透明，只需要把clip-path属性直接加在video标签上，去掉上层遮罩层即可。

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