css - 对齐图像/精灵以显示上半部分和下半部分

Question

我正在尝试定位图像，因此下半部分与一张图像的上半部分相反，但不知道该怎么做。

提琴手

图像本身看起来像这样。

编辑：最终图像应如下所示。

Answer 1

你的 CSSsection.sep h3.top应该是section.sep h4.top因为你h4在 HTML 中使用过而不是h3

你的 HTML ：

<section class="sep">
    <h4 class="top company-tag">Pics</h4>
    <hr/>
    <h4 class="bottom company-tag">Map</h4>
</section>

Answer 2

您只需在section.sep h4中定义高度和行高， 现在可以根据您的要求正常工作..

CSS

section.sep h4{
  background: url('http://i1200.photobucket.com/albums/bb328/tobeeornot/sec.png') no-repeat transparent;
  color:#fff;
  font-family:arial;
    font-size: 11px;
    font-weight: 400;
    height: 69px;
    letter-spacing: 1px;
    line-height: 50px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    width: 77px;

看演示：- http://jsfiddle.net/JvnHn/7/