CSSで文字の中に画像を入れる

もう5月になり日にちが経っていき、気温も徐々に上がってきてるころ、こっちは早く夏が来てほしい気分でいます！

話変わりますが…

CSSで文字の中に画像を入れる

javascriptを使わず、CSSだけ文字の中に画像を入れる方法を教えますね。

こっちは年に1回から2回しか使っておりませんが…

お客様の要望の内容によって使ったりしています。

ここは忘備録として書き込みします。

※ここから記述するときは中略させておきます。

<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="author" content="" />

	  	<!-- Google Webfont -->
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
	</head>

	<body>
		<p>文字の中に背景画像が入る</p>
	</body>
</html>

次に、CSS

p {
	color: #333;
	font-family: "Lato", sans-serif;
	font-size: 200%;/* 文字の大きさは好みでお任せ */
	font-style: normal;
	font-weight: 900;
	text-align: center;
}

ここまでのイメージはこれです。

さてと、文字の中に画像をはめ込みたいとき、プロパティを加えておかなければなりません。

使用する画像はこちらです。

p {
	-webkit-background-clip: text;/* ベンダープレフィックスとして設定 */
	-webkit-text-fill-color: transparent;/* ベンダープレフィックスとして設定 */
	background: url("./bgimg.jpg") no-repeat center center;
	background-clip: text;/* テキストの形でクリッピングする */
	background-size: 100%;
	color: transparent;/* 色を透過させる */
	font-family: "Lato", sans-serif;
	font-style: normal;
	font-weight: 900;
	text-align: center;
}

テキストの中に背景画像を埋め込みました。