(3) 然后我们扩展下平板大小视口下高清图的高度。为此，要使用断点 @screen-sm-min 写一个媒体查询，（即视口在 768px ~ 991px 之间时）把 #welcome 元素的高度变为 480px：
#welcome { ... @media (min-width: @screen-sm-min) { height: 480px; } }
(4) 接下来考虑大视口，此时把高清图变成540px 高。在这个宽度下，我们使用更大的背景图片subway-1600x1060.jpg，同时把 background-size设置为 cover:
#welcome { ... @media (min-width: @screen-md-min) { height: 540px; background: #191919 url('../img/subway-1600x1060.jpg') center center no-repeat; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } }
有了这些样式，当视口变大时，就会显示1600px 宽的背景图片了。
接下来，我们为欢迎语添加样式，使其突出出来。
调整欢迎语
客户希望高清图上的欢迎语超级大。Bootstrap 的高清图样式把原字号增大了1.5倍，我们还要再增大一些。还要在宽屏中约束欢迎语的宽度，并在其下方衬托一个半透明的盒子。
目前的结果在小屏幕中表现已经很好了：
不过还是可以改进了。那就是在本文底下衬托一个半透明的黑盒子。
(1) 打开 html文档，高清图 container 类内部，添加一个新的类 welcome-message 的 div 元素，把里面的h1 标题和段落包含起来：
<section> <div> ... </div> </section>
(2) 接着，为这个 div 添加样式，分以下几步：
□ 使用 HSLA 添加半透明黑色背景；
□ 将其设为绝对定位，并通过上、下、左、右设置为0，将其拉伸至高清图一样大小；
□ 使用 #welcome 将高清图设置为相对定位，以便确定欢迎语的位置；
□ 给欢迎语添加内边距；
□ 使用原有的 strong 标签把“Big”变成大写，同时增大字号。
#welcome { ... position: relative; .welcome-message { background-color: hsla(0,0,1%,0.4); position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30px 40px; strong { font-size: 1.5em; text-transform: uppercase; } ...
(3) 保存文件，编译CSS，然后刷新浏览器。应该就能看到背景变暗了，文本在这个深色背景上也更加引人注目，效果图如下：
(4) 下一步，要考虑 @screen-sm 断点。前面我们已经为这个断点写过媒体查询，我们在其基础上添加一些规则，完成以下任务：
□ 把高清图的 container 设置为相对定位，使其成为新的定位参照点，以便我们从上方和左侧向内缩小欢迎语的盒子；
□ 右侧向内缩小20%；
□ 将底边设置为 auto，以便盒子能收缩适应内容；
□ 将“Big”设置为块级元素，单独显示在一行上。
@media (min-width: @screen-sm-min) { height: 480px; .container { position: relative; } .welcome-message { right: 20%; bottom: auto; strong { display: block; } } }
现在，平板大小视口下，显示效果如下：
(5) 最后，再针对大视口做调整。在大视口中，我们想限制以下欢迎语盒子的宽度。这次要用到之前针对断点 @screen-md-min 创建的媒体查询：
@media (min-width: @screen-md-min) { ... .welcome-message { right: 50%; } }
显示效果如下：
这样，我们自定义的高清大图就此完成，满足了客户显示超大欢迎语的要求，同时还能适应平板、手机等设备的屏幕。
7.功能列表