メニュー

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

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

トップ
E-Mail
xml

ASP.Netのお勉強
VB.Netのお勉強
phpのお勉強
Excel マクロ・VBAのお勉強
ASP.Netで掲示板を作成しよう
AJAXのお勉強
Javaのお勉強
連想書籍検索
世界の観光地検索
路線図
総合サイトCocoaLiz
画像に文字を表示(CSS)@Webデザインのお勉強

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

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

以下の様な感じです。
画像の上に、「Hello World」を表示しています。
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>




Copyright (C) 2008 Webデザインのお勉強. All Rights Reserved.