最近，Twitter 创始人建立了一个新的很酷的社交媒体发布机构，名为 https://medium.com/
我的第一个想法是:哦，哇，这些家伙是如何完成这个出色的启动页面的？
那么，我的愚蠢问题是:是否有一种快速而简单的方法可以使用 Twitter Bootstrap 执行类似的操作？
最佳答案
对我来说这似乎很容易。如果你看一下代码(这里是一个美化版本):
<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
<span class="twitter">
</span>
</a>
</span>
</div>
</div>
</body>
重要的部分是body background-image和mask，CSS在这里定义>>> dnqgz544uhbo8.cloudfront.net/_/fp/css/splash-base.umkWq9wEC0rFHI0pblZljA.css <<<
- mask 位于主体上方宽度/高度 100%，z-index 100 和透明颜色 #E3E3E1。其他项目 quote、pull-quote 和 actions 位于其上方(您可以在提到的链接中查看它们的 CSS 定义)。
您还需要一些尺寸适合不同分辨率/设备类型(例如 Android 手机)的图片，因此您可以立即非常快速地提供尺寸正确的图像，并在加载页面时将其作为背景图像插入正文。
编辑:链接位于>>> <<<之间，显然SO的正则表达式不喜欢链接的结构(它与http://混淆)
关于twitter-bootstrap - Twitter Bootstrap 中的中等启动页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13542744/