如何在文本悬停时将视频不透明度设置为线性渐变不透明度？答案

【问题标题】：How to set a video opacity to a linear-gradient opacity on text hover?如何在文本悬停时将视频不透明度设置为线性渐变不透明度？
【发布时间】：2020-02-24 15:31:13
【问题描述】：

我有一个 video 嵌套在父 div 中。我想将其opacity 设置为来自left to right, 100% to 0% 的linear-gradient 透明效果。想法是在左侧的100% opacity 和右侧的0% 观看视频。

上下文： 总体目标是在悬停不同的text-item 元素时将两个视频与不同的linear-gradient opacity 混合在一起。

我当前的代码：

HTML

<div class="media">
  <video class="media__item" autoplay muted>
    <source src="src.mp4" type="video/mp4" />
    Your browser doesn't support the video tag.
  </video>
</div>

CSS

.media {
  width: 320px;
  height: 240px;
}

.media__item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  opacity: 50%; /* this is wrong */
}

【问题讨论】：

您必须使用带有渐变的叠加层......但我怀疑这不会给您想要的效果。您不能将opacity 应用于元素的部分。
是的，这就是我不想做的。 :-( 总体目标是将两个视频与linear-gradient opacity 在text-item hover 上的两个视频之间混合在一起。
不幸的是，我认为你做不到。我不太熟悉它，但您可能可以使用canvas 做点什么，但这是另一个问题。
mask-image 应该做你需要的。
mask-image:linear-gradient(to right, white,transparent) 应该这样做

标签： html css html5-video

【解决方案1】：

从我从您的问题中了解到的是，您想像正常一样播放视频，但只是在其上叠加了线性渐变，因此下面的代码显示了从黑色到零不透明度的向右的线性渐变

希望此代码对您的旅程有所帮助

.media{
    background: linear-gradient(to right, #000000, rgba(19, 19, 19, 0));
    }
    
.media__item {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

<div class="media">
      <video class="media__item" autoplay muted>
        <source src="src.mp4" type="video/mp4" />
        Your browser doesn't support the video tag.
      </video>
    </div>

【讨论】：