2

最近，Twitter 创始人建立了一个新的很酷的社交媒体发布，名为https://medium.com/

我的第一个想法是：哦，哇，这家伙是怎么做这个很好的启动页面的？

所以，我的愚蠢问题是：有没有一种快速简单的方法可以用 Twitter Bootstrap 做类似的事情？

4

1 回答 1

2

这对我来说似乎很容易。如果您查看代码（这里是经过美化的版本）：

  <body itemscope itemtype="http://schema.org/CreativeWork" style="background-image:url('//dnqgz544uhbo8.cloudfront.net/_/fp/img/home/b.PJ4x7XRiSEPMkdWrQj2WbQ.jpg')">
    <div class="mask">
    </div>
    <div class="content page-splash">
      <div class="logo-terms">
        <a href="//medium.com/policy/9db0094a1e0f" class="tos">
          Our Terms of Service
        </a>
        <div class="logo">
          Medium
        </div>
      </div>
      <div class="message">
        <span class="quote">
          “
        </span>
        <span class="pull-quote">
          We’re rethinking publishing and building a new platform from scratch. This is a preview.
        </span>
        <span class="actions">
          <a href="//medium.com/about/9e53ca408c48">
            Read more
          </a>
          <span class="or">
            or
          </span>
          <a href="/m/account/authenticate-twitter">
            Sign in with Twitter&nbsp;
            <span class="twitter">
            </span>
          </a>
        </span>
      </div>
    </div>
  </body>

重要的部分是这里定义body background-image的 CSS 和maskCSS >>> dnqgz544uhbo8.cloudfront.net/_/fp/css/splash-base.umkWq9wEC0rFHI0pblZljA.css <<< -mask宽度/高度 100% 位于 body 上方，z-index100 和 a透明色#E3E3E1。其他项目quote,pull-quote和actions位于其上方（您可以在上述链接中查看它们的 CSS 定义）。

您还需要一些尺寸为不同分辨率/设备类型（如安卓手机）的图片，这样您就可以非常快速地提供正确尺寸的图像，并在页面加载时作为背景图像插入正文。

编辑：链接在>>> <<<之间，显然SO的正则表达式不喜欢链接的结构（它与http://混淆）

于 2012-11-24T17:01:24.053 回答