如何在视频上方实现带透明文字的不透明色块？SVG/CSS/JS方案

一、SVG方案调整 #

你的问题出在对SVG mask工作原理的理解上。SVG mask的规则是：白色区域会显示下方元素的内容，黑色区域会隐藏下方元素的内容。你之前的代码里，最后一个<rect>是黑色，改成白色后需要确保mask的逻辑依然成立，这样才能实现白色半透明色块+文字透出视频的效果。

修改后的SVG代码如下：

<video autoplay muted loop poster="../billeder/Blue-Horizon.jpg" id="bgvid">
  <source src="../video/Blue-Horizon.mp4" type="video/mp4">
  <source src="../video/Blue-Horizon.webm" type="video/webm">
</video>
<svg viewbox="0 0 100 60" style="position:absolute; top:0; left:0; width:100%; height:100%;">
  <defs>
    <!-- mask里的白色rect定义色块范围，黑色text定义要透明的文字区域 -->
    <mask id="mask" x="0" y="0" width="100" height="60">
      <rect x="0" y="0" width="100" height="60" fill="#fff"/>
      <text text-anchor="middle" x="51" y="35" dy="1" style="font-size:18px; font-weight: 900" fill="#000">SUMMER</text>
    </mask>
  </defs>
  <!-- 这里把fill改成白色，fill-opacity控制半透明程度 -->
  <rect x="5" y="15" width="95" height="30" mask="url(#mask)" fill="#fff" fill-opacity="0.5"/>
</svg>

关键调整点：

• 把mask里的基础rect改成覆盖整个viewbox的白色矩形，确保除了文字外的区域都能显示下方的白色半透明色块
• 将最后一个<rect>的fill设为#fff，fill-opacity保持0.5，这样就能实现白色半透明的色块效果
• 给SVG加上position:absolute; top:0; left:0; width:100%; height:100%;，确保它能覆盖在视频上方（如果你的布局里没做这个的话）

二、CSS替代方案（更简洁） #

如果觉得SVG太繁琐，用CSS的mask属性可以更快速实现相同效果，不需要额外的SVG代码：

首先调整HTML结构，把视频和覆盖层放在一个容器里：

<div class="video-wrapper">
  <video autoplay muted loop poster="../billeder/Blue-Horizon.jpg" id="bgvid">
    <source src="../video/Blue-Horizon.mp4" type="video/mp4">
    <source src="../video/Blue-Horizon.webm" type="video/webm">
  </video>
  <div class="text-block"></div>
</div>

然后添加CSS：

.video-wrapper {
  position: relative;
  width: 100%;
  height: 60vh; /* 对应你SVG的viewbox高度比例，可根据需求调整 */
  overflow: hidden;
}

#bgvid {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-block {
  position: absolute;
  top: 25%; /* 对应SVG里rect的y=15，15/60=25% */
  left: 5%; /* 对应SVG里rect的x=5，5/100=5% */
  width: 95%;
  height: 50%; /* 对应SVG里rect的height=30，30/60=50% */
  background: rgba(255, 255, 255, 0.5); /* 白色半透明背景 */
  /* 用CSS mask实现文字形状的镂空 */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><text text-anchor="middle" x="50%" y="50%" dy=".3em" style="font-size:18px; font-weight:900; fill:black;">SUMMER</text></svg>') center/auto no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><text text-anchor="middle" x="50%" y="50%" dy=".3em" style="font-size:18px; font-weight:900; fill:black;">SUMMER</text></svg>') center/auto no-repeat;
}

这个方案的优势是：

• 不需要维护单独的SVG代码，所有逻辑都在CSS里
• 更容易调整色块的位置、大小和透明度
• 文字的位置可以通过mask的center属性自动居中，更灵活

三、为什么原来的SVG代码改白色无效？ #

你之前尝试把<rect>的fill改成白色但没生效，是因为mask里的<rect>只覆盖了部分区域（x10,y10,width82,height35），而你最后一个<rect>是x5,y15,width95,height30，两者的范围不匹配，导致部分白色色块没有被mask正确处理，看起来像是fill-opacity只对黑色生效。调整mask的基础rect为全屏后，就能解决这个问题。

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