在《【CSS】【13】文字的排版》中，把《桃姐》这部电影排版成如下样式：
若大家经常浏览电影网页时会发现，一般的会贴一个海报出来，本例我们就把左上部分的“主演、导演”换成图片。
一、HTML部分代码：
<h1>《桃姐》简介</h1>
<div class="actors">
<img src="tao.png" />
<p>主演：刘德华 叶德娴 秦海璐 秦沛</p>
<p>导演：许鞍华</p>
<p>年代：2012</p>
</div>
与《【CSS】【13】文字的排版》相比，HTML部分只是多增加了<img src="tao.png" />一行，其它的均没有变化。
二、CSS部分代码：
使用后代选择器，把图像大小设置为100*150，同时把<p>标记隐藏掉，代码如下：
div.actors img
{
width:100px;
height:150px;
}
div.actors p
{
display:none;
}
三、查看效果：
这里为何不把<p>标记的主演、导演内容删除呢？而是使用display属性把其隐藏，这是为了像Google、baidu这样的搜索引擎便于搜索，从而提升网站的排名。
四、进一步美化：
为了使页面进一步美化，我们使用粉红色的背景图片，这个背景图片与海报的背景色系相近，同时把<h1>标题也使用背景替换。
/*
* H1的背景颜色重设为黑色，并居中对齐，设置背景图片是带花纹的。
*/
h1
{
background-image:url(h1bg.gif);
color:#000000;
text-align:center;
}
body
{
background-image:url(bg.gif);
}
其效果为：
其中bg.gif和h1bg.gif分别为：
这里再度复习了一下背景图片的使用，若不显示设置ground-repeat，则默认水平和竖直方向扩展。细心的可能会发现<h1>标题背景图片没有指定ground-repeat，也意味着它将向水平和竖直两个方向无限地扩展，但为何没有扩展为整个页面呢？
本文转自qingkechina 51CTO博客，原文链接：http://blog.51cto.com/qingkechina/1261765，如需转载请自行联系原作者
