CSSで文字の中に画像を入れる
2024年5月9日
もう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;
}テキストの中に背景画像を埋め込みました。
テキストの中に背景画像が入りましたね。
ここまでのおさらい…
テキストを透過させるためには、「background-clip: text;」と「-webkit-text-fill-color: transparent;」の2つの設定が必要になります。
ついでに、テキストの色を無色にさせるために「color: transparent;」を設定する必要になります。
でも、ゴシック系はきれいに表示されていますが、明朝系はちょっとわかりづらいかと思います。
文字の中に背景画像を埋め込むなら、フォントの太さを「極太」に設定する必要がありますね。
レギュラータイプやと分かりづらいかと…
こっちも忘れるときがあるので、忘備録としてφ(..)メモメモ…
では、また！
- Leonardo
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日
- オリジナルリセットスタイル構築中 2024年12月17日
- 今日は家族のクリスマスプレゼント～Part.3～ 2024年12月16日
- 今日は家族のクリスマスプレゼント～Part.2～ 2024年12月15日