社員ブログ
HOME  社員ブログ
ホーム > CSS, 社員:coji-coji, 雑記 > CSS 一枚の画像ファイルで複数タイトルを表示する。

CSS 一枚の画像ファイルで複数タイトルを表示する。

2011年05月13日 16時18分19秒

ブロードヒューマンネットワークのcoji-cojiです(・∀・)

今回は、CSSについての記事です。

web上にて、各ページのタイトル画像やサブ画像といったデザインが統一した画像があります。
デザインが同じでも、ページによっては文言を変えて複数の画像を作成しなければなりません。

そこで…”「一枚の画像で複数タイトルを表示させる」”

表示するにあたってはCSSを使用、
以下の内容を記述します。

◆HTML
<div id=”test_title1″>タイトル画像(1番)</div>

<div id=”test_title2″>タイトル画像(2番)</div>

◆CSS
#test_title1 {
background: url(“./image/test_img.jpg”) no-repeat scroll 0px 0px transparent;
display: block;
height: 53px;
margin: 0;
padding: 0;
width: 158px;
text-indent: -9999px;
}
#test_title2 {
background: url(“./image/test_img.jpg”) no-repeat scroll 0px -60px transparent;
display: block;
height: 53px;
margin: 0;
padding: 0;
width: 158px;
text-indent: -9999px;
}


※test_title1&2にある”background ~省略~ ”の中に”0px 0px”があります。
この数値を、表示させたい位置に設定すると画像が表示されます。
これによって、一番と二番の画像が切替えることが可能になります。

◆web上での表示はこちら
一枚の画像で複数のタイトルに変えることができます。
・一枚の画像

・一番目の場合

・二番目の場合

あっ!お湯が沸きましたので、この辺で・・・

CSS, 社員:coji-coji, 雑記

  1. コメントはまだありません
  1. トラックバックはまだありません