html - 如何使背景文字出现在 youtube 视频下方？

Question

页面上有一个水平居中的 YouTube 视频，但问题是在移动设备(手机/平板电脑)上，视频加载需要一些时间(有时需要 1.5 秒)。因此，在此期间，指定用于视频的区域似乎是空白的。所以人们可能会认为那里什么都没有，然后继续前进。

所以我尝试制作一个背景文本(在视频下方)说“视频正在加载”。查看如何制作背景文字后，我发现以下内容 answer .我尝试了这两种方法(使用::before 和内部的另一个 div，但没有成功)。

这里是 my fiddle我能得到的最接近的。那里的不透明度只是为了看到文本在视频后面。这是我失败的 CSS 部分(就在这里因为 SO 拒绝没有代码和 jsfiddle 的帖子)。

.video-preloader{
    position: relative;
    text-align:center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
}

Answer 1

由于目标元素 .video-preloader 是绝对定位的，因此父元素 .video 的相对定位很重要。

.video {
    /* .. */
    margin:0 auto;
    position:relative;
}

为了使文本垂直/水平居中，您可以使用以下方法。它适用于不同尺寸的动态文本 (example) ..

EXAMPLE HERE

.video-preloader {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: -1;
    overflow: hidden;
}
.video-preloader > span {
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    width:100%;
    top: 50%;
    left: 0;
}

或者，如果您想要的是带有加载 .gif 的背景图片，则可以使用以下方法:

EXAMPLE HERE

.video-preloader {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: -1;
    overflow: hidden;
    background: url('http://i.stack.imgur.com/w28B4.gif') 50% 50% / 80px 80px no-repeat;
}

您可以轻松修改简写属性中的 background-position/background-size 属性。在这种情况下，图像以 background-position: 50% 50%..

为中心