サイト構成
背景画像を元にサイトを構成

CSS
DIVタグで枠を作成
DIVタグで見出しに枠を作成
画像に文字を表示
マウスフォーカスで背景画像変更
tableタグでボタンを作成

トップ

画像に文字を表示(CSS)＠Webデザインのお勉強

画像に文字を表示します。
結構、見かけますね。

タイトルやメニューのバックの背景を画像にして、
文字などを表示したりします。

以下の様な感じです。
画像の上に、「Hello World」を表示しています。

サイトを飾る上では、結構使えるかもしれませんね。

background-image: url('画像のパス')：背景画像を指定します。 background-repeat: no-repea：画像の繰り返しを無くします。 padding: 10px 0px 0px 100px：内側の余白、上、右、下、左の順です。 font-size：文字のフォントサイズです。 color：文字の色です。 height:枠の高さです。 <div style="background-image: url('img001.jpg');             background-repeat: no-repeat;             padding: 10px 0px 0px 100px;             font-size:52px;             color:#FFFFFF;             height:82px; "> Hello World </div>