スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像の上に文字を帯状に書く、方法。CSSで

画像の上に表示する文字

画像の上に帯状に文字を書く方法です。CSSで出来ます。続きは、htmlとcssのサンプルを載せておきます。
HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>画像の上に文字を帯状に書く、方法。CSSで</title>
</head>
<body>
  <div class="sample">
    <a href="http://blog-imgs-67.fc2.com/b/l/o/blog130/img_38.jpg">
    <img src="http://blog-imgs-67.fc2.com/b/l/o/blog130/img_38.jpg" width="200px" />
<p>画像の上に表示する文字</p>
    </a>
  </div><!-- .sample -->
  
</body>
</html>
CSS
.sample {
	width: 200px;
	position: relative;
}
.sample p{
	position: absolute;
	left: 0;
	bottom: 0.5em;
	color: #fff;
	margin: 0;
	padding: 5px 0 5px 3%;
	width: 97%;
	background: #000;
	filter: Alpha(opacity=70);
	opacity: 0.7;
}
.sample a {
	text-decoration: none;
}
.sample a:hover p{
	text-decoration: underline;
}

画像の上に文字を帯状に書く、方法。CSSで
・参考サイト
http://wp.salt26.jp/general/872
こちらのサイトを大いに参考にしました。
関連記事

コメント


管理者のみに表示
ニューハーフ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。