【问题标题】:Text centered overlayed on video in Joomla module in HTML文本居中覆盖在 HTML 中 Joomla 模块中的视频上
【发布时间】:2015-02-26 18:23:14
【问题描述】:

好的。我已经为此苦苦挣扎了一天。有人可以帮忙吗?

我正在尝试在 Joomla CMS 模块中自动播放 .mp4 视频作为背景,文本覆盖在模块中心的顶部。

我认为简单的 html 会比尝试找到一个插件来完成它更好。

基本上我希望视频在模块的中心(水平和垂直)自动播放。这相当容易,因为视频是模块的精确宽度,高度会自动调整。该模块是响应式的,所以那里没有问题。此代码有效:

<video width="1600" autoplay loop>
<source src="/newimages/capsulas-compatibles.mp4" type="video/mp4">
</video>

我最苦恼的是将 H1 标题放在视频顶部的中心(水平和垂直)。所以我尝试了以下html,但文本只是出现在视频之前,而不是覆盖在视频的中心:

<div style="z-index:10; position:relative; top:0; text-align:center; vertical-align: middle; ">
<h1><font color="white">HERE IS MY TEXT</font></h1></div>
<div style="z-index:1;"><video width="1600" autoplay loop>
<source src="/newimages/myvideo.mp4" type="video/mp4">
</video></div>

是我的代码有问题还是在 Joomla 模块中? 非常感谢任何帮助。

【问题讨论】:

  • 您必须将 h1 div 位置设置为绝对位置并将左侧和顶部设置为 50%
  • 就是这样!感谢您花时间回答。你真的很开心(我的!)
  • 欢迎您。我将其发布为答案。它可能对其他人有所帮助。

标签: css html video joomla


【解决方案1】:

尝试按照它来解决您的问题:

<div style="z-index:10; position:relative; top:50%; left:50%; text-align:center; vertical-align: middle; position:absolute; ">
<h1><font color="white">HERE IS MY TEXT</font></h1></div>
<div style="z-index:1;"><video width="1600" autoplay loop>
<source src="/newimages/myvideo.mp4" type="video/mp4">
</video></div>

使 H1 DIV position:absolute; 并给出 left:50%;top:50%;

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-01
    • 2011-10-05
    • 2018-01-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多