css - 上半分と下半分を表示するための画像/スプライトの位置合わせ

Question

下半分が1つの画像の上部の逆になるように画像を配置しようとしていますが、その方法がわかりません。

Jsフィドル

画像自体はこんな感じ。

編集: 最終的な画像は次のようになります。

Answer 1

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/

Answer 2

CSSは、HTMLではなくHTMLで使用したためである必要がありsection.sep h3.topますsection.sep h4.toph4h3

あなたのHTML：

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