在 HTML 视频上环绕文本叠加

发布于08月26日

我正在try 将文本覆盖在视频元素的顶部.到目前为止我的代码是:

body {
  margin: auto;
  text-align: center;
  background-color: black;
  line-height: 0;
}

.container {
  position: relative;
  display: grid;
  height: 100%;
}

.container video {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 8vw;
  font-family: Arial, Sans-Serif;
  opacity: 25%;
  z-index: 1;
}

<div class="container">
  <video type="video/mp4" src='data:video/mp4;base64,...'>Your browser does not support the video tag.</video>
  <div class="overlay">
    <p>OVERLAY TEXT</p>
  </div>
</div>

这个很好用.然而，唯一的问题是，当覆盖文本变得太长时，它不会换行到下一行，而是堆叠在自己的顶部.有没有办法设置样式，使覆盖文本换行到下一行，而整个覆盖保持在视频的中心？谢谢!

body { margin: auto; text-align: center; background-color: black; line-height: 0; } .container { display: grid; grid-template-areas: "video"; place-items: center; } .container video { max-width: 100%; max-height: 100vh; margin: auto; width: 100%; height: auto; grid-area: video; } .overlay { grid-area: video; color: white; font-size: 8vw; font-family: Arial, Sans-Serif; opacity: 25%; }

在 HTML 视频上环绕文本叠加

推荐答案

Html相关问答推荐

R中的动态Webscraping

当使用浮动标签和大小时，如何在 Select 组件中有更多可见选项？

如何使我的组织 struct 图的连接线响应？

如何使用*ngFor将模板从父级传递到子级

错误时交换表单，成功时使用HTMX重定向

布局更改时的转换

为什么字体大小而不是 colored颜色属性适用于元素？

Div 容器不会遵守边距、填充或间隙

如何为卡片块制作侧丝带样式

样式化单选按钮背景 colored颜色

将图像高度调整到容器 div 中而不使其高度增加

CSS：第一个类型的伪类没有按预期工作

什么没有 margin-right 和 width：100% 溢出子元素到左边？

导航丸被选中(活动)，但内容未显示.怎么会？

我如何设置括号的样式，使它们不会挂在旁边的其他字符下面

本地 css 样式表未链接

如何使用：before 在 CSS 中为列表增加计数器

具有淡入/淡出效果的 CSS 选框

如何向上移动图像并溢出图像的一部分而另一部分不溢出

是否有一种静态方式可以根据暗模式 Select 一张或另一张图像？