我将如何在视频顶部创建一个带有透明文本的不透明彩色框

Question

>我目前有这个：

当前"模型"的屏幕截图

背景是一个视频，所以它应该使文本看起来"活着"。

我已经通过 SVG 完成了此操作，如何将背景从黑色更改为白色？填充不透明度似乎不适用于黑色以外的其他颜色。

如果这是不可能的，那么是否可以通过CSS或Javascript来做到这一点？

<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">
  <defs>
    <mask id="mask" x="0" y="0" width="60" height="50">
      <rect x="10" y="10" width="82" height="35" fill="#fff" stroke-opacity="0.8"/>
      <text text-anchor="middle" x="51" y="35" dy="1" style="font-size:18px; font-weight: 900" opacity="1">SUMMER</text>
    </mask>
  </defs>
  <rect x="5" y="15" width="95" height="30" mask="url(#mask)" fill-opacity="0.5"/>    
</svg>

Answer 1

如果希望矩形为白色，请将其填充设置为白色。

<svg viewBox="0 0 100 60">
  <defs>
    <mask id="mask" x="0" y="0" width="60" height="50">
      <rect x="10" y="10" width="82" height="35" fill="#fff" stroke-opacity="0.8"/>
      <text text-anchor="middle" x="51" y="35" dy="1" style="font-size:18px; font-weight: 900" opacity="1">SUMMER</text>
    </mask>
  </defs>
  <image width="100" height="60" xlink:href="https://image.freepik.com/free-photo/sea-water_1160-2.jpg"/>
  <rect x="5" y="15" width="95" height="30" mask="url(#mask)" fill="white" fill-opacity="0.5"/>    
</svg>