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

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

スポンサードリンク

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>