Question

我正在尝试用视频等效性替换富HTML文件（视频流站点中具有电影封面背景的页面）中的背景封面。我通过一些小的更改就解决了一些屏幕适合的问题，但现在的问题是它变得太亮（显然其中一个类（tv-page-entity）在背景图像的顶部添加了一个较暗的层，现在不可见。但是我无法在全屏视频上实现这一点。

我该如何解决？

这是原始代码段：

<tv-background-image class="style-scope tv-page-entity x-scope tv-background-image-0 loaded" style="background-image: url(&quot;./files/image.jpg&quot;)"></tv-background-image>

这是我的更改：

<style>
#myVideo {
  position: relative;
  min-width: 100%;
  min-height: auto;
  z-index: -10;
}

.fullscreen-bg::before {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    z-index: 1;

    /* Any overlay color that you want, here I use black with 25% opacity */
    background-color: rgba(0,0,0,0.8);
}
</style>
    <tv-background-image id="myVideo" class="style-scope tv-page-entity x-scope tv-background-image-1 loaded">
    <video  id="myVideo"  autoplay muted loop>
      <source  src="video/video.mp4" type="video/mp4">
    </video>
    </tv-background-image>

HERE是原始的html文件，也是我更改过的文件。

用视频对象替换HTML背景图像的问题

0 个答案: