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

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

<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>

如何在视频顶部创建一个透明文字的不透明彩色框？

1 个答案: