« 
 »
8月 04 2010

CSSで画像の上にテキストを配置する

投稿者: admin, カテゴリ: HTML・CSS, tags: ,
投稿日: 2010.08.04 - 21:40
更新日: 2011.09.18 - 01:03


▲こんなふうになりました。３ブラウザでとりあえず表示できたので良しとしてみた。

スポンサードリンク

CSSで画像の上にテキストを配置するというより、テキストリンクの後ろに画像を持ってくる感じのようです。

<style type="text/css">
<!--

.btA{
	padding-top			: 120px;
	padding-bottom		: 130px;
	text-decoration		: none;
	background-image	: url("./bt_dark_yellow.jpg");
	background-repeat	: no-repeat;
	background-position	: left top;
	display				: block;
}
.btB{
	padding-top			: 120px;
	padding-bottom		: 130px;
	text-decoration		: none;
	background-image	: url("./bt_dark_yellow.jpg");
	background-repeat	: no-repeat;
	background-position	: left top;
	display				: block;
}
#bt{
	width				: 512px;
	height				: 300px;
	font-size			: 30px;
	text-align			: center;
}
-->
</style>

<body>
	<div id="bt">
		<a class="btA" href="#">画像上の文字</a>
		<a class="btB" href="#">文字B</a>
	</div>
</body>

関連記事

スポンサードリンク

このエントリは 2010 8月 4 21:40 に投稿され、HTML・CSS 以下にファイルされています。 あなたは RSS 2.0 フィードを通してこのエントリへのレスポンスを取得することが可能です。 あなたはこの記事に対しコメントすることが可能です。また、あなたのサイトからトラックバックを送ることも可能です。 (TEST-4: 880 )

コメントする

Spam protection by WP Captcha-Free

すべての企業名および製品名は、関連するそれぞれの企業の商標である場合があります。