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ここmaskで定義されているCSSmaskですz-index。透明色＃E3E3E1。他のアイテムquote、pull-quoteおよびactionsその上に配置されます（前述のリンクでそれらのCSS定義を確認できます）。

また、さまざまな解像度/デバイスタイプ（Androidフォンなど）に寸法設定されたいくつかの画像が必要になるため、正しい寸法の画像を非常に高速に配信し、ページが読み込まれたときに背景画像として本文に挿入できます。

編集：リンクは>>> <<<の間にあり、SOの正規表現はリンクの構造を好まないようです（http：//で混乱します）

于 2012-11-24T17:01:24.053 に答える