Question

看看https://www.paypal.com/home 这是一个截图： enter image description here

他们如何才能将文字放在他们的视频/图片上？令我惊讶的是，无论我给他们的网站提供什么样的窗口大小，文本都会调整为始终保持在视频的中心，无论如何。他们是如何实现这一点的？有没有人有任何想法可以引导我朝着正确的方向前进？

谢谢！

Answer 1

尝试这样的事情

<html>
<head>
  <title></title>

  <style type="text/css">
    #container {
      position: relative;
    }
    #text {
      position: absolute;
      margin: 50px 0;
      text-align: center;
      width: 560px;
    }
    #video {
      position: absolute;
      background-color: #aaf;
    }
  </style>
</head>
<body>

  <div id="container">
    <video id="video" width="650" height="250"></video>
    <div id="text">My text</div>
  </div>

</body>
</html>

然后你需要一些javascript来更新你的视频宽度。

PS：我添加了背景颜色以查看视频占位符。

Answer 2

似乎是双层，背景图像可以有颜色，黑色层具有低不透明度％。至于文本大小调整，我想的是一个文本框，其字体大小为％，而不是px或em编号。使％具有流畅的布局，这意味着可调节的尺寸取决于划线尺寸。

Paypal如何实现此设计功能？

2 个答案: