CSSのpositionプロパティを使用して画像の上に文字列を重ねて表示する方法を示します。おまけとしてアニメーション機能を使用して文字列をスクロールさせます。重ねることにより文字の内容や位置の変更にも早く対応できて良いですね。

1.画像の上に文字列を表示する

CSSの設定は、画像は「position:relative;」にして、文字列は「position: absolute;」とします。文字列はtop、bottom、left、right等を使用して位置を調整します。

サンプルでは写真の下の方に文字列を表示します。文字列のバックグランドに半透明の黒い帯を表示させます。

HTMLのサンプルソース


<div class="photo">
	<img src="image.jpg" />
	<p class="text">きれいな風景を見て、ちょっと一息</p>
</div>

CSSのサンプルソース


.photo {
	width:		100%;
	margin:		0;
	padding:	0;
	position:	relative; /* 相対位置指定 */
}
.photo img {
	width:		100%;
}
.text {
	width:		100%;
	font-size:	150%;
	text-align:	center;
	bottom:		4px;
	margin:		0;
	padding:	0;
	color:		#fff;
	background:	rgba(0,0,0,0.4); /* 帯の透明度 */
	position:	absolute; /* 絶対位置指定 */
}
road01

きれいな風景を見て、ちょっと一息

2.アニメーションします

上下へスクロールします。

topの値の大きさを変えてスクロールしています。

CSSソース


.photo1 {
	width:		100%;
	margin:		0;
	padding:	0;
	position:	relative;
	overflow:	hidden;
}
.photo1 img {
	width:		100%;
}
.text1 {
	position:	absolute;
	width:		100%;
	height:		12%;
	font-size:	180%;
	text-align:	center;
	top:		0px;
	margin:		0;
	color:		#fff;
	background:	rgba(0,0,0,0.4);
	animation: 	slide 4s ease-out 1s infinite alternate;
}
@keyframes slide {
	0% { top:	0px; }
	100% { top:	78%; }
}
road01

きれいな風景を見て、ちょっと一息

電光掲示板みたいに横スクロールします。

rightの値の大きさを変えてスクロールしています。レスポンシブに対応すると、画像の大きさにより値を調整するのが面倒です。

CSSソース


.photo2 {
	width:		100%;
	margin:		0;
	padding:	0;
	position:	relative;
	overflow:	hidden;
}
.photo2 img {
	width:		100%;
}
.text2 {
	position:	absolute;
	font-size:	180%;
	white-space:	nowrap;
	bottom:		36px;
	margin:		0;
	color:		#fff;
	animation: 	slide2 16s linear 0s infinite;
}
@keyframes slide2 {
	0% { right:	-570px; }
	100% { right:	680px; }
}
road01

きれいな風景を見て、ちょっと一息