☰

CSSでテキストを背景として使用する方法はありますか? 質問する

tag-icon • tag-icon html css background
CSSでテキストを背景として使用する方法はありますか? 質問する

タグ内の特定の要素の背景に動的テキストを使用したいと思います。そのためには、画像 (動的テキスト) を使用できます。CSS または JavaScript だけでこれを行うにはどうすればよいですか?

ベストアンサー1

SVG テキスト背景画像

body {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='red' font-size='20'>I love SVG!</text></svg>");
}
<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p>
<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p>

より理解しやすいように、CSSのインデントバージョンを以下に示します。これは動作しません代わりに、上記のスニペットのシングル ライナー SVG を使用する必要があります。

body {
  background-image:url("data:image/svg+xml;utf8,
  <svg xmlns='http://www.w3.org/2000/svg' version='1.1'
       height='50px' width='120px'>
    <text x='0' y='15' fill='red' font-size='20'>I love SVG!</text>
  </svg>");
}

これがどれほど移植可能かはわかりません (Firefox 31 および Chrome 36 で動作します)。技術的には画像ですが、ソースはインラインのプレーン テキストであり、無限に拡張できます。

@senectus は、base64 でエンコードすると IE でより適切に動作することを発見しました。https://stackoverflow.com/a/25593531/895245

おすすめ記事