让我们来做一些更大胆的尝试。这是Get Hardboiled网站的一个促销面板，用来促进某本书的销量。先秀出一段专业的HTML代码：article中包含了一个标题和一段文字。

 
   The Phantom Detective 
   The Phantom Detective was the
second pulp hero published after The Shadow. The first issue was
released in February 1933. The title continued until 1953, with
a total of 170 issues.

这个article的宽度将会占满它的容器，但我们还是需要为它设置以像素px为单位的内边距值，这种混合使用的方式很让人头疼。但是不用担心，通过声明border-box，混合使用百分比和像素px单位就容易了。

.item { 
width : 100%; 
padding : 40px 80px 40px 280px; 
box-sizing : border-box; }

如果你想知道为什么左边的内边距值这么大，我用一分钟就能为你解答清楚。现在我们使用一张很大的背景图像，这是这个设计的关键，我们将它水平居中地固定在这个区域的底部。

.item { 
width : 100%; 
padding : 40px 80px 40px 280px; 
background: url(scene.jpg) no-repeat 50% 100%; 
background-size : 200px 300px; 
box-sizing : border-box; }

结果看起来挺好，但它并不完美，因为当用户缩小浏览器窗口时，两边的背景图像会被截掉。

1510.tif

在右图中，当用户缩小浏览器宽度时，背景图像被被截掉了。

CSS的background-size属性还有两个关键字，它们都是用来等比缩放背景图像的，分别是cover和contain。哪种更适合当前这种场景呢？这有点令人困惑。首先，使用contain缩放背景图像后，保证宽和高都包含在元素内而不被截掉。

1511.tif

这张背景图像包含在元素内部。

使用cover的话，背景图像会缩放宽和高，从而覆盖整个元素。

1512.tif

元素的尺寸无论如何改变，都会一直被这张背景图像覆盖——完美的响应式设计。

在设计完促销面板之后，我们将小说封面图片添加进入，作为第二张背景图像。想到如何来定位它了吗？你可能会这样做：用一个很大的内边距值为左边留出足够的空间，然后把这张背景图像定位到距离顶部和左边各40px的位置。

用逗号隔开，分别定义每个背景图像的位置、平铺方式和尺寸，并且要记住，我们定义的第一张背景图像的层级更高。

.item { 
background-image : 
url(../Images/cover.jpg) 40px 40px no-repeat, 
url(scene.jpg) 50% 100% no-repeat; 
background-size : 200px 300px, cover; }

1513.tif

最终，我们用两张背景图像实现了一个响应式设计。第二张背景图像还可以随着容器的尺寸变化，实时地等比缩放尺寸；第一张图像则会使用它的原生尺寸。现在，它就显得很专业了。