画像の上に透けている文字列を表示する方法

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

1.画像の上に透けている文字列を表示する

写真と文字の重ね合わせは、以前掲載したこちらをご覧ください。
透けた文字列は mix-blend-mode:overlay を使用して実現しています。
mix-blend-modeは画像や文字など二つが重なったときに、どう表示するかを指定できます。

サンプルでは写真の下の方に文字列を表示します。

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:	200%;
	font-weight:	bold;
	text-align:	center;
	top:		10%;
	margin:		0;
	padding:	0;
	color:		#fff;
	mix-blend-mode:	overlay;
	position:	absolute; /* 絶対位置指定 */
}

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%;
	font-weight:	bold;
	text-align:	center;
	top:		0px;
	margin:		0;
	color:		#fff;
	mix-blend-mode:	overlay;
	animation: 	slide 4s ease-out 1s infinite alternate;
}
@keyframes slide {
	0% { top:	0px; }
	100% { top:	78%; }
}

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

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

CSSソース

.photo2 {
	width:		100%;
	margin:		0;
	padding:	0;
	position:	relative;
	overflow:	hidden;
}
.photo2 img {
	width:		100%;
}
.text2 {
	position:	absolute;
	font-size:	200%;
	font-weight:	bold;
	white-space:	nowrap;
	top:		40%;
	margin:		0;
	color:		#fff;
	mix-blend-mode:	overlay;
	animation: 	slide2 16s linear 0s infinite;
}
@keyframes slide2 {
	0% { right:	-570px; }
	100% { right:	680px; }
}

mix-blend-modeには、いろいろな値をセットすることができます。文字を透かすためにoverlayをセットしましたが、他の値をセットすることで違った効果が出せます。